一键回到顶部
// ==UserScript==
// @name To Top
// @namespace https://github.com/RANSAA
// @version 0.0.3
// @description 一键回到顶部
// @author sayaDev
// @license MIT License
// @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAABI5JREFUWEfVmWtsFFUUx/9nt+yu21Y6WxK1mZpgpYD1WWOIGDVUPlQMogFaVmKiIaLxhR80+tFHTKziI1ET8JsxdlHABBqhigIGQogfaClIUIoau9YS09nui92yu3P13tlZt8t2Z3Y6tZn5tJm955zfnDmve4cwg6upb9TvTlyxkoEtB3ALQC1g7GoQ6oRahgSIxgB2HsBJAh3L1aW+G13ddNGqWbIi2ByKPMiARwG2FkC1OhhAuwn4bCQo7a3WflXG5JDyCEAvAuy2ag2VX08DANsaDgZ6zeozBdy8Q7mRMbwDoNOs4irX9RPhpZENgdNGcobA8g5lMxi2WXj1RrZL/2cgPBXeEPikkmBFYDmkvAXg5Wotz3B9TzgYeGU6HdMCyyHlIwDPzNC4VfGPw8HAs+WEywLPkWdL+cp6+jLgfMxut+oaW+UIT5bG9BTgfDUY+h8SzOxzMSLcXFw9pgDLIWX/LJYus5Cl6/rDwcD9+s0CsNYU8LlVrbMst1FvLkXAkRP2dTC78WkgHJTauVYBrM0GbI/dZuzUR6A1fPYQwHIoshNg6+w0YL8u2hUOSuuJj4iuhC9hVBk6muZVHMt+GMsgq9qPWaSRqXXpOjITDrU1hLPrGirSrNgXw3AsN6vEPCzITFfzuIAvOuqFhz1uwk2SW4D9HM0hkWHi96YjCYxPar9n8erhwFXV3gU+FwYemi+YVh+IY3A8W+B7td2PNdd60OgjpLIM3/yZwQvHk1AZ8NwNPmxp8+HHv7O4xu/CdfVuZFSGbWcnsfVUyuwz9pMcivwCsEVmJaYDfuN2Px5b5L1MDQdc+30cr7f78Xjrf//zd6HX1KePJdH3xyUTCHSO5F4lBkK9idViSTlgFwG/d0sC4MiFDDYfTeK1dj+6FnqEzMr9MWxs8RaAtxxP4vBfGRxeNR+Sl/BrPId7v44ZIzDEeUjw3DYc5HVt5YDvvmoeeldo+87lfVGMJFXwuB/u0h7izcEUmvwuAXxJBVq+jIi17y2rxfqFHiSzDEt2TRgDA8wWYF7yPr1HA166e6KQiL91S6gh4P3TaTR4SABP5hiu36nB8Zjf1OpFKsfQmr9nQM1sCQnuzfNdkrD19lAKH55JY1WzB9vvqhX3ug/G0Sl7CiHRsS+Gc7EcDnReiSUNboxeVLFsb9TYw1pI2JN0unFuVZlkCHi1KAsnVdzZF52SdDzhxtMMC3zamndPpfDBT2ljYPCkq7KsNXoJgw9rTeSBb2MYUrRmUeMCvrqvHrc21hQSgjeS4KEExlJqAZi/fsYAP4+VfxPy6IUsgofiJmDFEl7W7N1o8orRJrkxHFVFbOqXXtY4/B17olja4Bbej+cbj0niHlOt2aSyistKga3oFK3Z7PBjxUCxzBOLfXi+zYczEzmRhBYubfjhgo4aLzmwmYnNgkdsFZkywOe97JwtkgbssE1oHrqqUdPWdz69svLbfBHL2rGqcw5ShJe141VnHFXpb8Xu7mcxdMwdBhZBO+e4dY49be1AuwDtpE8GOrSjPsoUJ4xjPnuVZrljPiyWgs/Fp9t/AHRkG8ORcRVOAAAAAElFTkSuQmCC
// @match http://*/*
// @match *://*/*
// @grant none
// @compatible chrome
// @compatible edge
// @compatible firefox
// @compatible opera
// @compatible safari
// @noframes
// ==/UserScript==
/**
* 说明:
*
* noframes: 禁止脚本在iframe中运行
*
* compatible：greatest.deepsurf.us脚本站点兼容性图标
*
**/
// @downloadURL https://update.greatest.deepsurf.us/scripts/504497/To%20Top.user.js
// @updateURL https://update.greatest.deepsurf.us/scripts/504497/To%20Top.meta.js
//是否开启滚动动画
let toTopAnination = 1;
/**
* Top图标，通过textToImage方法生成
**/
let imgToTopBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAiRJREFUWEftls2rTVEYxn+PCCHlc3JJJpIoCjMD3ZGJZMIAmRiRTEzciDIyEf/AnSoDEyVfkzuTCQmZSLolTHzE9ZHHefWe2p3OPWff2znHPbXWaO+99lrvbz37eZ9zxJANDRkvBbjfX6woXBRuUaBYoliiWKLfHigKF4U7K1A7h23vg45/lu5K+tVvwWsB214KfOkCs1nSy7kCvBB4mArH9Y4Ee1Y5yH5JH+YEcBXC9lrgXT7bLelRc972VeAwsBr4BtwCjkr6Y/scMAZMACPAJuAncKUxf77uQWtZog6w7evAyTaFJyTtsX0NOFWZd6UnDkm6UQe6J8C25zXU+50A94GDQKh9PCG2AicqwEeAO0B4fiXwSlIo3nX0CngUuJfVNkp6bTu8/j0PcRZYl8A/JC2Kd22PA8eAr5KWdaXtElNt17fzcEbe7VywXNLnBIqYm9+ocxFYkcBTkhbnfHyF0+F3SUsGCRxqTmXBMUmXbYctbuazvcCBiiW2SHpu+ykQdnkraf3AgFOtZvG4/QisSoA3kja0NF00XETgmnzngqRL/QKOyHqfm++U9DiBF2Rk7apYLZpqVNJkBTjiLoCbFnggKXqg1phx03XbNRNjO/BCUsD9GxXgSUkjtrc1UiTU/9Rtz+p8z4GnK94KPBPI/wV8Jn/pnkiKJpzVGJjCs6Jrs6gA90rJ6fYpCheFWxQoliiWKJbotweKwkXhzgoMXQ7/BX21vy2/MtAjAAAAAElFTkSuQmCC";
(function() {
'use strict';
addToTopButton();
})();
function addToTopButton(){
// 首先查询页面上是否存在TKToast元素
let existingTKToTop = document.querySelector('TKToTop');
if (existingTKToTop) {
return;
}
//创建style
addToTopStyle();
// let toTop = createSVGToTop()
let toTop = document.createElement("img");
// toTop.src = textToImage("Top");
toTop.src = imgToTopBase64;
toTop.setAttribute("class","TKToTopStyle");
//定义的是事件被触发后要做的事情
toTop.addEventListener("click", function() {
if (toTopAnination == 1){
window.scrollTo({left:0,top:0,behavior:'smooth'});
}else{
window.scrollTo(0,0);
}
});
// 创建一个包含按钮的DIV元素
const toToDIV = document.createElement("TKToTop");
toToDIV.setAttribute("class","TKToTopStyle");
// 将按钮添加到DIV中
toToDIV.appendChild(toTop);
// 添加到body中
document.body.appendChild(toToDIV);
}
function createSVGToTop()
{
var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElement.setAttribute("width", "44");
svgElement.setAttribute("height", "44");
// svgElement.setAttribute("style", "background-color: transparent"); // 设置透明背景色
// 创建一个<circle>元素
var circleElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circleElement.setAttribute("cx", "22");
circleElement.setAttribute("cy", "22");
circleElement.setAttribute("r", "20");
circleElement.setAttribute("fill", "#1ca7ee");
// 创建一个<text>元素并设置其属性和样式
var textElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
textElement.setAttribute("x", "50%"); // 居中对齐
textElement.setAttribute("y", "50%");
textElement.setAttribute("text-anchor", "middle"); // 文本居中对齐
textElement.setAttribute("dominant-baseline", "middle"); // 文本垂直居中对齐
textElement.setAttribute("fill", "white");
textElement.setAttribute("font-size", "14px");
textElement.setAttribute("font-weight", "700"); // 设置字体粗细
textElement.style.fontFamily = "Arial"; // 设置字体样式，如果需要的话
textElement.textContent = "Top";
// 将<circle>和<text>元素添加到<svg>元素中
// svgElement.appendChild(circleElement);
svgElement.appendChild(textElement);
return svgElement;
}
function addToTopStyle(){
const style = `
.TKToTopStyle{
background: #1ca7ee;
background-color: #1ca7ee;
color: #ffffff;
right: 16px;
bottom: 20px;
position: fixed;
z-index: 999999;
width: 44px;
height: 44px;
border: none;
cursor: pointer;
padding: 0;
border: 1px solid;
border-color: #1ca7ee;
border-radius: 50% ;
box-shadow: 0px 0px 8px #1ca7ee;
margin: 0; /* 确保没有外边距 */
padding: 0; /* 确保没有内边距 */
lineHeight: 1; /* 确保行高不影响布局 */
outline: none; /* 移除可能的外部边框 */
display: 'block'; /* 设置为块级元素 */
}
.TKToTopStyle:active,
.TKToTopStyle:hover{
box-shadow: 0px 0px 16px #1ca7ee;
}
`;
var styleId = "TKToTopStyle";
// 首先查询页面上是否存在具有给定ID的<style>元素
var existingStyle = document.getElementById(styleId);
//如果存在则跳过
if (existingStyle) {
return;
}
var myStyle = document.createElement("style");
myStyle.type="text/css";
myStyle.id = styleId;
myStyle.innerHTML = style;
document.head.appendChild(myStyle);
}
/**
* 将文字生成PNG图片
* 使用：
const img = document.createElement("img");
img.src = textToImage("Top");
document.body.appendChild(img);
**/
function textToImage(text) {
const canvas = document.createElement("canvas");
canvas.width = 44;
canvas.height = 44;
const ctx = canvas.getContext("2d");
// 设置背景填充颜色，需要执行fillRect，fill等方法才会生效
ctx.fillStyle = "#1ca7ee";
// // 填充背景为矩形
// ctx.fillRect(0, 0, 44, 44);
// // 填充背景为圆形
// // 获取圆形半径（取宽高中的最小值的一半）
// const radius = Math.min(width, height) / 2;
// const centerX = width / 2;
// const centerY = height / 2;
// ctx.beginPath();
// ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
// ctx.fill();
// 绘制文字
ctx.fillStyle = "#fff";
ctx.font = "700 14px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
// ✅文字绘制在画布中心
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
return canvas.toDataURL("image/png");
}