Lets you scroll to the top of a page by the click of a button without it being intrusive.
// ==UserScript==
// @name Efficient Scroll to Top
// @namespace Essential Scripts
// @match *://*/*
// @grant none
// @version 1.0
// @author solarcosmic
// @license MIT
// @description Lets you scroll to the top of a page by the click of a button without it being intrusive.
// ==/UserScript==
/*
* Efficient Scroll to Top
* Lets you scroll to the top of a page by the click of a button without it being intrusive.
*
* How to use:
* 1. Visit any page on the internet.
* 2. Start reading the page - a black button should appear at the top right with an up arrow.
* 3. You can click it to scroll back up to the top, or right click it to remove it for the duration that you're visiting that page.
* Simple!
*/
// Create button to be used throughout the whole script
const button = createButton();
function createButton() {
// Create button and apply a ton of styles
const button = document.createElement("button");
button.style = `
display: none;
position: fixed;
top: 50px;
right: 50px;
z-index: 999;
padding: 15px;
font-size: 20px;
opacity: 0;
cursor: pointer;
background-color: #000000;
border-radius: 8px;
border-style: none;
`;
// Up arrow which is shown on the button
button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="24" height="24" fill="#ffffff">
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>
</svg>
`;
document.body.appendChild(button); // Add the button to the body of the HTML
return button;
}
/*
* Determines when to show the button and what opacity should be set when/where.
*/
function doScrollAction() {
if (!button) return;
// Only start showing the button once scrolled past a specific point
if (window.scrollY > 500) {
button.style.display = "block"; // Show button
} else {
button.style.display = "none"; // Hide button
}
// Get the max scroll distance, then divide the current scroll distance by it
const maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
if (maxScrollY > 0) button.style.opacity = window.scrollY / maxScrollY; // e.g. 0.72 for 72%
}
/*
* I think you may know what this does.
* This is the "scroll to top" behavior.
*/
button.addEventListener("click", function() {
window.scrollTo({
top: 0,
behavior: 'smooth' // Extra effect
});
});
/*
* This hides the button on right click until the user leaves or refreshes the page.
* This uses the "contextmenu" event, which works good!
*/
button.addEventListener("contextmenu", (event) => {
event.preventDefault(); // Prevent the context menu from showing up
button.remove(); // Removes the button, surprisingly no errors!
})
/*
* Mouse enter & leave effects.
* Mostly just for styles.
*/
button.addEventListener("mouseenter", () => {
button.style.opacity = 1; // Make the button fully visible on hover
button.style.transform = 'scale(1.1)'; // Expand the button for extra effect
})
button.addEventListener("mouseleave", () => {
button.style.opacity = 0.5; // Return the opacity back to its initial state
button.style.transform = 'initial'; // De-expand the button to its initial state
})
// Connect scroll event to visibility control function
window.addEventListener("scroll", doScrollAction, false);