// ==UserScript== // @name 滚动到顶部按钮 // @namespace http://tampermonkey.net/ // @version 1.2 // @description 在网页添加一个“回到顶部”的按钮,可以快速回到页面顶部。 // @author Techwb.cn // @match https://*/* // @match http://*/* // @grant none // @license MIT // @downloadURL none // ==/UserScript== (function() { 'use strict'; // 创建按钮元素 var scrollButton = document.createElement('div'); scrollButton.classList.add('goto_top'); scrollButton.innerHTML = '
'; // 添加按钮到页面 document.body.appendChild(scrollButton); // 当用户滚动页面时,如果已经滚动了一定距离,就显示按钮 window.addEventListener('scroll', function() { if (window.pageYOffset > 100) { // 滚动距离超过 100px 时 scrollButton.style.display = 'block'; // 显示按钮 } else { scrollButton.style.display = 'none'; // 否则隐藏按钮 } }); // 点击按钮时,回到页面顶部 scrollButton.addEventListener('click', function() { window.scrollTo(0, 0); // 将页面滚动到顶部 }); // 添加按钮样式 var style = document.createElement('style'); style.innerHTML = ` .goto_top { display: none; content: ''; width: 40px; height: 40px; position: fixed; bottom: 10%; right: .3rem; background: url("https://obj.pipi.cn/festatic/moviepro/img/movie-home/gototop-a6ba6fb8.png"); background-size: contain; z-index: 9999; cursor: pointer; } .goto_top img { display: block; width: 100%; height: 100%; } .goto_top:hover { background-color: #ccc; } `; document.head.appendChild(style); })();