Add buttons to scroll to top and bottom of page in the bottom right corner of the screen
// ==UserScript==
// @name Scroll To Top/Bottom Button
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add buttons to scroll to top and bottom of page in the bottom right corner of the screen
// @match *://*/*
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Check if running in top-level document and not in an iframe
if (window.self === window.top && !window.frameElement) {
// Define the styles for the buttons
var styles = `
.scroll-to-btn {
position: fixed;
right: 20px;
font-size: 50px;
border: none;
color: white;
border-radius: 10%;
cursor: pointer;
z-index: 9999; /* set z-index to a high value */
background-color: transparent;
filter: grayscale(90%);
/* transform: rotateX(30deg) translateZ(50px) ;*/
}
.scroll-to-btn.top {
bottom: 95px;
}
.scroll-to-btn.bottom {
bottom: 40px;
}
`;
// Add the styles to the page
GM_addStyle(styles);
// Create the scroll to top button
var scrollToTopBtn = document.createElement("button");
scrollToTopBtn.innerText = "🔼";
scrollToTopBtn.classList.add("scroll-to-btn", "top");
scrollToTopBtn.addEventListener("click", function() {
window.scrollTo({top: 0, behavior: 'smooth',timingFunction: 'cubic-bezier(0,.84,.49,.99)'});
});
// Create the scroll to bottom button
var scrollToBottomBtn = document.createElement("button");
scrollToBottomBtn.innerText = "🔽";
scrollToBottomBtn.classList.add("scroll-to-btn", "bottom");
scrollToBottomBtn.addEventListener("click", function() {
window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth',timingFunction: 'cubic-bezier(0,.84,.49,.99)'});
});
// Add the buttons to the page
document.body.appendChild(scrollToTopBtn);
document.body.appendChild(scrollToBottomBtn);
}
})();