☰

Scroll to Bottom and Top Button

Add buttons to scroll to the bottom and top of the website

当前为 2025-03-17 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Scroll to Bottom and Top Button
// @name:zh      底部和顶部按钮
// @namespace    https://greasyfork.org/
// @version      1.0
// @description  Add buttons to scroll to the bottom and top of the website
// @description:zh
// @author       ghzxs
// @match        *://*/*
// @license     MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    if (window !== window.top) {
        return;
    }

    // Base64-encoded SVG data for bottom icon
    const base64BottomIcon = 'PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24tc20gbS0xIiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiPjwvcG9seWxpbmU+PC9zdmc+';

    // Base64-encoded SVG data for top icon
    const base64TopIcon = 'PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24tc20gbS0xIiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTIiIHkxPSIxOSIgeDI9IjEyIiB5Mj0iNSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjUgMTIgMTIgNSAxOSAxMiI+PC9wb2x5bGluZT48L3N2Zz4=';

    // Common styles for both buttons
    const buttonStyles = {
        position: 'fixed',
        zIndex: '9999',
        backgroundColor: 'none',
        border: '0.5px solid transparent',
        borderRadius: '50%',
        padding: '4px',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    };

    // Create the bottom button
    const bottomButton = document.createElement('button');
    const bottomImg = document.createElement('img');
    bottomImg.src = `data:image/svg+xml;base64,${base64BottomIcon}`;
    bottomImg.alt = 'Scroll to Bottom';
    bottomImg.style.width = '16px';
    bottomImg.style.height = '16px';
    bottomImg.style.display = 'block';
    bottomButton.appendChild(bottomImg);

    // Apply styles to the bottom button
    Object.assign(bottomButton.style, buttonStyles);
    bottomButton.style.bottom = '14px';
    bottomButton.style.right = '14px';

    // Add click event listener to scroll to the bottom
    bottomButton.addEventListener('click', function() {
        window.scrollTo({
            top: document.body.scrollHeight,
            behavior: 'smooth'
        });
    });

    // Append the bottom button to the body
    document.body.appendChild(bottomButton);

    // Create the top button
    const topButton = document.createElement('button');
    const topImg = document.createElement('img');
    topImg.src = `data:image/svg+xml;base64,${base64TopIcon}`;
    topImg.alt = 'Scroll to Top';
    topImg.style.width = '16px';
    topImg.style.height = '16px';
    topImg.style.display = 'block';
    topButton.appendChild(topImg);

    // Apply styles to the top button
    Object.assign(topButton.style, buttonStyles);
    topButton.style.bottom = '50px';
    topButton.style.right = '14px';

    // Add click event listener to scroll to the top
    topButton.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // Append the top button to the body
    document.body.appendChild(topButton);

    // Function to toggle the visibility of the top button
    function toggleTopButton() {
        if (window.scrollY === 0) {
            topButton.style.display = 'none';
        } else {
            topButton.style.display = 'flex';
        }
    }

    // Initial check
    toggleTopButton();

    // Add scroll event listener to toggle the top button
    window.addEventListener('scroll', toggleTopButton);
})();