Back to Top button

[Mischback]

Articles tend to be quite long, so the primary navigation (in the page's header) is most likely not visible. On the other hand, the user might find that the article is not living up to their expectations, so they want to re-navigate while they are in the middle of the page, so the secondary navigation (in the page's footer) is not (yet) available, either.

Requirements

• hide button until primary navigation is not visible
• on mobile devices/single column layout only show the button, when the user swiped up. It is assumed that the button will cover parts of the content, which is not desired. But when the user scrolls up (just a tiny bit), it is assumed that they would like to return to the top, so support them with a button.
• on desktop devices/two column layout the button may be placed in the area of the aside and can always be visible.
• icon and text (for accessiblity reasons)
• styling in the site's style.css
• required JS is provided as Progressive Enhancement, meaning visitors without activated JS simply get no button, but there is no error either.

Resources

• https://www.nngroup.com/articles/back-to-top/ Including design guidelines