您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
在任何网页顶部显示滚动进度条,并提供滚动到顶部和底部的按钮。
当前为
// ==UserScript== // @name 滚动条及顶部底部按钮 // @namespace https://gf.qytechs.cn/ // @version 0.2 // @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/8/84/Arrow-up.svg", "⬆️顶部", () => { window.scrollTo({ top: 0, behavior: "smooth" }); }); const toEnd = createScrollImageButton("https://upload.wikimedia.org/wikipedia/commons/2/23/Arrow-down.svg", "⬇️底部", () => { 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); })();
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址