滚动条及顶部底部按钮

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

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

(function() {
    'use strict';

    // 获取页面滚动条的位置
    function getScrollTop() {
        return window.pageYOffset || document.documentElement.scrollTop;
    }

    // 获取页面总高度
    function getPageHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    // 获取视口高度
    function getClientHeight() {
        return 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: 'all 0.4s ease'
    });

    progressBar.appendChild(bar);

    // 更新进度条宽度
    function 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)}%`;
    }

    // 创建滚动图像按钮
    function createScrollImageButton(imgSrc, altText, onClick) {
        const img = document.createElement("img");
        img.src = imgSrc; // 使用传入的网络图像 URL
        img.alt = altText;
        Object.assign(img.style, {
            width: '30px',
            height: '30px',
            marginRight: '15px',
            cursor: 'pointer' // 添加鼠标指针样式
        });
        img.onclick = onClick;
        return img;
    }

    // 创建滚动到顶部和底部的图像按钮
    function createScrollButtons() {
        const scrollBtns = document.createElement("div");
        scrollBtns.className = "goto_top_end";
        Object.assign(scrollBtns.style, {
            position: "fixed",
            bottom: "10px",
            right: "60px",
            zIndex: "1000000000",
            display: "flex",
            flexDirection: "column"
        });

        // 使用外部网络图像资源
        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', function () {
        updateProgress();
        createScrollButtons();
    });

    // 监听滚动事件
    window.addEventListener('scroll', updateProgress);

})();