一键回到顶部
// ==UserScript==
// @name To Top
// @namespace https://github.com/RANSAA
// @version 0.0.1
// @description 一键回到顶部
// @author sayaDev
// @license MIT License
// @icon data:image/png;base64,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
// @match http://*/*
// @match *://*/*
// @grant none
// @compatible chrome
// @compatible edge
// @compatible firefox
// @compatible opera
// @compatible safari
// @noframes
// ==/UserScript==
/**
* 说明:
*
* noframes: 禁止脚本在iframe中运行
*
* compatible：greasyfork.org脚本站点兼容性图标
*
**/
//是否开启滚动动画
let toTopAnination = 1;
(function() {
'use strict';
addToTopButton();
})();
function addToTopButton(){
// 首先查询页面上是否存在TKToast元素
let existingTKToTop = document.querySelector('TKToTop');
if (existingTKToTop) {
return;
}
//创建style
addToTopStyle();
let toTop = createSVGToTop()
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);
}