油猴test，在每个页面都添加返回顶部按钮

最新推荐文章于 2024-07-02 23:00:59 发布

insgo

最新推荐文章于 2024-07-02 23:00:59 发布

阅读量576

点赞数 1

分类专栏： tampermonkey

本文链接：https://blog.youkuaiyun.com/insgo/article/details/113799700

版权

tampermonkey 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种用户脚本，通过创建一个固定在页面底部的返回顶部按钮，实现快速回到页面顶部的功能。使用了JavaScript和CSS来创建并定位这个小部件，适合提升网站用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// ==UserScript==
// @name         totop
// @namespace    http://unamerrr.net/
// @version      0.1
// @match        *://*/*
// @description  返回顶部
// @author       unamerrr
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
  var toTopBtn = document.createElement('button')
    toTopBtn.innerHTML = "返回顶部"
    toTopBtn.className = "a-b-c-d-toTop"
    toTopBtn.onclick = function (e) {
      scrollTo(0, 0)
    }
    var body = document.body
    var style = document.createElement('style')
    style.id = "a-b-c-d-style"
    var css = `.a-b-c-d-toTop{
      position: fixed;
    bottom: 10%;
    right: 5%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 15px;
    z-index: 999;
    cursor: pointer;
    font-size: 12px;
    overflow: hidden;
    }`
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    body.appendChild(toTopBtn)
    body.appendChild(style)
    // Your code here...
})();