search

reactjs / react.dev

The React documentation website
https://react.dev/
Creative Commons Attribution 4.0 International
11.04k stars 7.54k forks source link

Accessibility: Add scroll back to top button #3679

Open D-Antonelli opened 3 years ago

D-Antonelli commented 3 years ago

When I go to a topic section, I need to scroll all the way up to go to the top of the page to access the navigation menu.

For example

  1. Go to Hooks FAQ
  2. Click a navigation button

The current behavior

I need to scroll all the way up to go to the table of contents.

Expected behaviour

Click a scroll to the top button for instant access to the navigation menu like this one.

grimxreaper commented 3 years ago

I can see the need for a scroll to top button regardless, I think it's a great idea, but for reference, I can still see the navigation menu even when I scroll down, pic included. Is this what you see too? Either way, I'd love to take this issue on as my first contrib to this repo if possible! 🙂 @eps1lon

As you can see, even if I have scrolled down on the page, the navbar is still visible.

Screen Shot 2021-05-13 at 10 11 49 AM
D-Antonelli commented 3 years ago

Hi @grimxreaper! I just noticed my statement about navigation needs correction. What I meant by navigation is indeed the "FAQ" section. \ The FAQ section starts with "Adoption Strategy". When I click a link, it takes me to the related section on the same page. Everything works fine until this point. However, when I want to go back to the FAQ section because I want to check another question, I need to scroll up all the way back. \ \ Capture Capture2

grimxreaper commented 3 years ago

Ah I see @D-Antonelli thank you for clarifying! Even in that case I guess a scroll to the top button would be the fix needed to navigate back to the FAQ section. Does that sound like what you were imagining?

Could I try a stab at implementing this button as my first contrib to this repo @eps1lon @gaearon ? I'm it would need to be on each page of the website, so there should be a way to implement it in such a way that it becomes available on each page?

Thank you!

D-Antonelli commented 3 years ago

Even in that case I guess a scroll to the top button would be the fix needed to navigate back to the FAQ section. Does that sound like what you were imagining?

Yes, @grimxreaper! I am suggesting back to top button like this example:

https://codepen.io/matthewcain/pen/ZepbeR

doiali commented 3 years ago

@D-Antonelli the current active page (for example Hooks FAQ ) is highlighted in the right side menu you can click that link to navigate back to top you don't need to worry about browser history because clicking this link doesn't push history

D-Antonelli commented 3 years ago

@doiali I get your point. I see the right-hand sidebar maps Hooks section and show Hooks FAQ in bold while I am there. It is not a wrong practice but to improve things further, go to the top button is a more predictable way of navigating the user inside the page rather than checking the Hooks site map.