Add a button that scrolls the page back to top

[dev-palwar]

Expected Behavior

The button should have the functionality to smoothly scroll the page back to the top upon being clicked.

Current Behavior

Right now, we have to manually scroll up the page, which can be a hassle, especially when reading blogs.

[NiallJoeMaher]

Any ideas on where something like this should be added or examples of blogs with it?

[dev-palwar]

Yeah, something like this

A button on the right side of the page similar to the one homepage that when clicked smoothly scrolls the page to the top

[MadhavKrishanGoswami]

I think I can work on this, just one thing where would I get the icon from?

[NiallJoeMaher]

@MadhavKrishanGoswami I'm trying to mock up something for the mobile design and then you can take it. 🦾

[akashsiddamshetty]

@dev-palwar @NiallJoeMaher check this below screen shot i have created this button to scroll to top smoothly. I want to make pr. can you guys add hacktoberfest labels to this issue #542

[Bitnagar]

@akashsiddamshetty Great job! The icon looks good. IMO we should not use gray color because it looks dull and not visually appealing. We can try sticking to the design in 2nd screenshot or else we can use gradient color that is in our theme.

[akashsiddamshetty]

@akashsiddamshetty Great job! The icon looks good. IMO we should not use gray color because it looks dull and not visually appealing. We can try sticking to the design in 2nd screenshot or else we can use gradient color that is in our theme.

@Bitnagar @NiallJoeMaher @dev-palwar check this out.

[NiallJoeMaher]

The problem is when we are on mobile. I just haven't seen a pattern on mobile I like. 😅 Any examples of sites doing it well?

[NiallJoeMaher]

Moved to discussion, I'm going to add in some ideas tomorrow/Monday too to see how I can achieve this and keep my mobile toolbar.

[dev-palwar]

We just need to add a button that scrolls the page back to top its not that deep 😅

[NiallJoeMaher]

@dev-palwar, you might not think it! But as a solo maintainer, I have to consider these things for UX/accessibility and preferences.

We have a mobile navbar already, so adding another floating button might be weird.

But maybe there is an option to incorporate it into the existing menu. 🤔

[Bitnagar]

@NiallJoeMaher CSS Tricks do it this way. Just a small size button.

[garyb1]

Certainly, several factors need to be taken into account. @NiallJoeMaher is right to take time to make sure it is right.

Nielson/Norman Group have some good advice on back to top. Some notes include deciding if a back to top is needed. The Scottish Government DS team referred to that in their back to top implementation.

Back to Top is more of a convenience for mouse or touch users. For users relying on keyboard or assistive tech, there are already existing shortcuts and key commands to achieve the same effect, making it less of a concern. For example, keyboard shortcuts like ctrl + home or just home (fn + left/right on Mac) will work.

In the DOM it might live above or below the footer info. Most examples i've seen live above footer.

Deciding where to send focus will be important here. An anchor element would be perfect. But should it navigate to the top (or to first focusable element (skip link if exists)), or top of the main content area. I think top of the page (or skip link) would be fine to be honest.

A visual label with "Back to Top" would be much better for many users. An icon on it's own might be ambiguous.

Accommodating smooth scrolling

Smooth scrolling should only be employed when the user has no reduced motion preference enabled.

@media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
 }