Accessibility: Add scroll back to top button

[D-Antonelli]

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]

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.

[D-Antonelli]

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.

[grimxreaper]

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]

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]

@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]

@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.