回到顶部(长按置底)

支持在所有页面生成一个顺滑回到顶部的按钮,修改自https://greasyfork.org/zh-CN/scripts/435303-%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8

当前为 2023-03-29 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name		  回到顶部(长按置底)
// @version			1.0.4.1
// @description		支持在所有页面生成一个顺滑回到顶部的按钮,修改自https://greasyfork.org/zh-CN/scripts/435303-%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8
// @author			@leo
// @email           [email protected]
// @match        *://*/*
// @grant        GM_notification
// @grant        GM_addStyle
// @license      MIT
// @namespace https://greasyfork.org/zh-CN/users/954189
// ==/UserScript==

;(() => {
//注入CSS
var style = document.createElement('style');
style.innerHTML = `
.GO_TO_TOP_button {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 1px 2px rgb(0 0 0 / 23%);
    position: fixed;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    background-color: white;
    opacity: 0.5;
}
.GO_TO_TOP_button svg {
  width: 24px;
  height: 24px;
  margin: 0;
}
`;
document.head.appendChild(style);
	
// 创建页面回到顶/底部方法
const goToTop = () => {
    window.scrollTo(0, 0);
}
const goToBottom = () => {
    window.scrollTo(0,document.body.scrollHeight);
}

// 创建DOM绑定方法
	const button = document.createElement('div')
	button.className = 'GO_TO_TOP_button'
	button.onclick = goToTop
	button.innerHTML =
		'<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M825.568 555.328l-287.392-289.28C531.808 259.648 523.488 256.576 515.2 256.64 514.08 256.544 513.12 256 512 256c-4.672 0-9.024 1.088-13.024 2.88-4.032 1.536-7.872 3.872-11.136 7.136l-259.328 258.88c-12.512 12.48-12.544 32.736-0.032 45.248 6.24 6.272 14.432 9.408 22.656 9.408 8.192 0 16.352-3.136 22.624-9.344L480 364.288 480 928c0 17.696 14.336 32 32 32s32-14.304 32-32L544 362.72l236.192 237.728c6.24 6.272 14.496 9.44 22.688 9.44s16.32-3.104 22.56-9.312C838.016 588.128 838.048 567.84 825.568 555.328z" ></path><path d="M864 192 160 192C142.336 192 128 177.664 128 160s14.336-32 32-32l704 0c17.696 0 32 14.336 32 32S881.696 192 864 192z"></path></svg>'
		
//长按0.5秒一键置底
   let pressTimer;
button.addEventListener("touchstart", (event) => {
  pressTimer = setTimeout(() => {
    goToBottom();
  }, 500);
});
button.addEventListener("touchend", (event) => {
  clearTimeout(pressTimer);
});

// 默认隐藏按钮
button.style.display = 'none'
document.body.appendChild(button)

//不在顶部时显示按钮,静止2秒后隐藏按钮
let timer;
window.addEventListener('scroll', function() {
    clearTimeout(timer);
    button.style.display = window.pageYOffset > 50 ? 'flex' : 'none';
    timer = setTimeout(() => {
        button.style.display = 'none';
    }, 2000);
});

// 监听滚动并渲染节点
	document.addEventListener('scroll', onScroll)
})()