A set of floating buttons on the screen that quickly scroll to the top and bottom of the page, and scroll up/down one page.
// ==UserScript==
// @name Scroll to Top/bottom for mobile phone
// @namespace http://tampermonkey.net/
// @version 2.3
// @description A set of floating buttons on the screen that quickly scroll to the top and bottom of the page, and scroll up/down one page.
// @author Kamiya Minoru
// @match *://*/*
// @exclude *://www.google.com/*
// @exclude *://www.google.com.tw/*
// @exclude *://www.google.co.jp/*
// @exclude https://www.bilibili.com/
// @exclude https://*.microsoft/*
// @exclude https://gemini.google.com/*
// @exclude https://chatgpt.com/
// @exclude https://claude.ai/*
// @exclude https://www.perplexity.ai/*
// @exclude https://chat.deepseek.com/*
// @exclude https://www.twitch.tv/
// @noframes
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// 設置 Trusted Types Policy
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: (input) => input,
createScript: (input) => input,
createScriptURL: (input) => input
});
}
// Create a container for the buttons
var container = document.createElement('div');
container.style.position = 'fixed';
container.style.right = '2px';
container.style.bottom = '90px';
container.style.zIndex = '9999';
document.body.appendChild(container);
// Create a style element for CSS
var style = document.createElement('style');
style.innerHTML = `
.svg-container svg path {
fill: rgba(3, 76, 133, 0.2); /* 20% transparent blue */
stroke: rgba(0, 0, 0, 0.4); /* 40% transparent black */
stroke-width: 1px;
}
`;
document.head.appendChild(style);
function createButton(innerHTML, onClick) {
var button = document.createElement('div');
button.className = 'svg-container'; // Add class for CSS styling
button.innerHTML = innerHTML;
button.style.width = '30px';
button.style.height = '30px';
button.style.cursor = 'pointer';
button.style.backgroundColor = 'transparent';
button.style.textAlign = 'center';
button.style.fontSize = '30px';
button.style.borderRadius = '0px';
button.style.userSelect = 'none';
button.style.marginBottom = '2px';
button.style.boxShadow = 'none'; // Remove the black background
button.addEventListener('click', onClick);
container.appendChild(button);
}
// SVG Icons (fill attribute removed)
const upArrowSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="30" height="30"><path d="M318 177.5c3.8-8.8 2-19-4.6-26l-136-144C172.9 2.7 166.6 0 160 0s-12.9 2.7-17.4 7.5l-136 144c-6.6 7-8.4 17.2-4.6 26S14.4 192 24 192l72 0 0 288c0 17.7 14.3 32 32 32l64 0c17.7 0 32-14.3 32-32l0-288 72 0c9.6 0 18.2-5.7 22-14.5z"/></svg>`;
const downArrowSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="30" height="30"><path d="M2 334.5c-3.8 8.8-2 19 4.6 26l136 144c4.5 4.8 10.8 7.5 17.4 7.5s12.9-2.7 17.4-7.5l136-144c6.6-7 8.4 17.2 4.6-26s-12.5-14.5-22-14.5l-72 0 0-288c0-17.7-14.3-32-32-32L128 0C110.3 0 96 14.3 96 32l0 288-72 0c-9.6 0-18.2 5.7-22 14.5z"/></svg>`;
const upDownArrowSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="30" height="30"><path d="M145.6 7.7C141 2.8 134.7 0 128 0s-13 2.8-17.6 7.7l-104 112c-6.5 7-8.2 17.2-4.4 25.9S14.5 160 24 160l56 0 0 192-56 0c-9.5 0-18.2 5.7-22 14.4s-2.1 18.9 4.4 25.9l104 112c4.5 4.9 10.9 7.7 17.6 7.7s13-2.8 17.6-7.7l104-112c6.5-7 8.2-17.2 4.4-25.9s-12.5-14.4-22-14.4l-56 0 0-192 56 0c9.5 0 18.2-5.7 22-14.4s2.1-18.9-4.4-25.9l-104-112z"/></svg>`;
// Create the buttons with embedded SVG icons
createButton(upArrowSVG, function() {
window.scrollBy({ top: -window.innerHeight, behavior: 'auto' }); // Remove smooth behavior for instant action
});
createButton(downArrowSVG, function() {
window.scrollBy({ top: window.innerHeight, behavior: 'auto' }); // Remove smooth behavior for instant action
});
createButton(upDownArrowSVG, function() {
if (window.scrollY === 0) {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'auto' }); // Remove smooth behavior for instant action
} else {
window.scrollTo({ top: 0, behavior: 'auto' }); // Remove smooth behavior for instant action
}
});
})();