☰

Scroll to Top Button

Adds a scroll to top button at the bottom right of the page when scrolled to the bottom, and hides it at the top.

As of 2024-07-24. See the latest version.

Author
DXRK1E
Ratings
0 0 0
Version
1.5
Created
2024-07-24
Updated
2024-07-24
Size
3.27 KB
License
MIT
Applies to
All sites

Scroll to Top Button Userscript

This userscript adds a convenient "Scroll to Top" button to web pages. The button appears at the bottom right of the page when scrolled to the bottom, and hides when at the top. It’s designed to enhance the browsing experience by providing quick navigation back to the top of the page.

Features

  1. Scroll to Top Button: A button that allows users to quickly scroll back to the top of the page.
  2. Visibility Control: The button appears only when the page is scrolled to the bottom and hides when at the top.
  3. Smooth Scrolling: The button uses smooth scrolling for a better user experience.

How It Works

  1. Button Creation:

    • The script creates a button element and styles it with CSS for a modern look.
    • The button is initially hidden using CSS properties opacity and visibility.

  2. Scroll Handling:

    • The handleScroll function checks the scroll position of the page and controls the visibility of the button.
    • The button becomes visible when the user scrolls to the bottom of the page and hides when scrolled up.

  3. Scroll to Top Functionality:

    • When the button is clicked, the page smoothly scrolls to the top using window.scrollTo.

Installation

To use this userscript, you need a userscript manager like Violentmonkey, Tampermonkey, or Greasemonkey. Follow these steps:

  1. Install a Userscript Manager:

  2. Adding the Script:

    • Simply click the button labeled "install the script" at the top.