滚动条及顶部底部按钮

Greasy Fork is available in English.
滚动条及顶部底部按钮

在任何网页顶部显示滚动进度条，并提供滚动到顶部和底部的按钮，优化性能，减少卡顿现象。
当前为 2024-10-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         滚动条及顶部底部按钮
// @namespace    http://greasyfork.icu/
// @version      0.8
// @description  在任何网页顶部显示滚动进度条，并提供滚动到顶部和底部的按钮，优化性能，减少卡顿现象。
// @author       Leo
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 获取页面滚动条的位置
    const getScrollTop = () => window.pageYOffset || document.documentElement.scrollTop;

    // 获取页面总高度
    const getPageHeight = () => Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

    // 获取视口高度
    const getClientHeight = () => window.innerHeight || document.documentElement.clientHeight;

    // 创建进度条元素
    const progressBar = document.createElement('div');
    progressBar.id = 'progress';
    progressBar.style.pointerEvents = 'none'; // 允许点击穿透
    document.body.insertBefore(progressBar, document.body.firstChild);

    // 创建进度条的 bar 元素
    const bar = document.createElement('div');
    bar.className = 'bar';
    Object.assign(bar.style, {
        position: 'fixed',
        zIndex: '999999999',
        top: '0',
        left: '0',
        width: '0%', // 设置初始宽度为 0%
        height: '2px',
        background: 'linear-gradient(90deg, #03a9f4, #f441a5)',
        boxShadow: '0 0 40px #03a9f4, 0 0 50px #f441a5, 0 0 60px #03a9f4', // 增加阴影效果
        borderRadius: '0.5em',
        transition: 'width 0.2s ease' // 优化过渡动画，减轻卡顿
    });

    progressBar.appendChild(bar);

    // 节流函数，用于控制函数调用频率
    const throttle = (fn, delay) => {
        let lastCall = 0;
        return (...args) => {
            const now = Date.now();
            if (now - lastCall >= delay) {
                lastCall = now;
                fn(...args);
            }
        };
    };

    // 更新进度条宽度
    const updateProgress = () => {
        const scrollTop = getScrollTop();
        const pageHeight = getPageHeight();
        const clientHeight = getClientHeight();
        const maxScroll = pageHeight - clientHeight;

        // 避免除以零的情况
        const progress = maxScroll > 0 ? (scrollTop / maxScroll) * 100 : 0;

        // 确保进度不会超过 100%
        bar.style.width = `${Math.min(progress, 100)}%`;
    };

    // 创建滚动图像按钮
    const createScrollImageButton = (imgSrc, altText, onClick) => {
        const img = document.createElement("img");
        img.src = imgSrc; // 使用传入的网络图像 URL
        img.alt = altText;
        Object.assign(img.style, {
            width: '2rem',
            marginLeft: '10px', // 修改为 marginLeft 以设置按钮间的水平间距
            cursor: 'pointer' // 添加鼠标指针样式
        });
        img.onclick = onClick;
        return img;
    };

    // 创建滚动到顶部和底部的图像按钮
    const createScrollButtons = () => {
        const scrollBtns = document.createElement("div");
        scrollBtns.className = "goto_top_end";
        Object.assign(scrollBtns.style, {
            position: "fixed",
            bottom: "10px",
            right: "5rem", 
            zIndex: "1000000000",
            display: "flex",
            flexDirection: "row", // 设置为 "row" 以实现水平布局
            alignItems: "center"
        });

        // 使用外部网络图像资源
        const toTop = createScrollImageButton("https://upload.wikimedia.org/wikipedia/commons/0/06/Arrowup_Nin-ZeldaGlyphsv2-Plain.png", "⬆️顶部", () => {
            window.scrollTo({ top: 0, behavior: "smooth" });
        });

        const toEnd = createScrollImageButton("https://upload.wikimedia.org/wikipedia/commons/3/3f/Arrowdown_Nin-ZeldaGlyphsv2-Plain.png", "⬇️底部", () => {
            const viewportHeight = getClientHeight();
            const documentHeight = getPageHeight();
            window.scrollTo({ top: documentHeight - viewportHeight, behavior: "smooth" });
        });

        scrollBtns.appendChild(toTop);
        scrollBtns.appendChild(toEnd);
        document.body.appendChild(scrollBtns);
    };

    // 页面加载时初始化
    window.addEventListener('load', () => {
        updateProgress();
        createScrollButtons();
    });

    // 监听滚动事件，使用节流来降低频率
    window.addEventListener('scroll', throttle(updateProgress, 50)); // 调整节流间隔，控制更新频率

})();