回到顶部(长按置底)(无动画)

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

目前為 2023-03-30 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

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

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name 回到顶部(长按置底)(无动画)
// @version	1.0.4.2
// @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	*://*/*
// @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.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秒直达底部,不足0.5秒直达顶部
let pressTimer;
let isLongPress = false;
button.addEventListener("touchstart", (event) => {
    event.preventDefault();
    pressTimer = setTimeout(() => {
        isLongPress = true;
        goToBottom();
    }, 500);
});
button.addEventListener("touchend", (event) => {
    event.preventDefault();
    clearTimeout(pressTimer);
    if (!isLongPress) {
        goToTop();
    }
    isLongPress = false;
});

// 默认隐藏按钮
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)
})()