Add Scroll-to-Top Button Feature #10169
Description
Description: A scroll-to-top button would greatly enhance user experience, especially for long web pages. This button should appear once the user scrolls down a certain distance and allow them to quickly return to the top of the page with a single click.
Feature Requirements:
Visibility:
The button should appear when the user scrolls down 20px or more from the top of the document.
It should be hidden when the user is near the top of the page.
Positioning:
The button should be positioned in the bottom-right corner of the viewport (fixed position).
It should stay visible while scrolling.
Design:
A simple round button with a label like "Top" or an arrow icon.
Hover effect to change the button's color.
Customizable appearance via CSS (background color, size, shadow, etc.).
Functionality:
When clicked, the button should smoothly scroll the user to the top of the page.
Compatibility with modern browsers (Chrome, Firefox, Safari, etc.).
Accessibility:
The button should have a title/aria-label for screen readers (e.g., "Go to top").