通过油猴脚本给浏览器页面加"返回顶部"按钮

原创

保持热爱奔赴山海

修改于 2023-12-28 08:06:59

1.3K00

代码可运行

文章被收录于专栏：DevOpsDevOps 数据库相关

运行总次数：0

代码可运行

update 2023-12-27 发现greasyfork上有人已经分享出来的返回顶部、返回底部的脚本，大家直接安装即可。

链接地址：https://greasyfork.org/zh-CN/scripts/459651-%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8-%E5%89%8D%E5%BE%80%E5%BA%95%E9%83%A8

安装完成后，刷新页面，可以看到右下角多出了2个箭头。

如果需要箭头的颜色或者坐标，可以去自行修改代码。

下面是旧内容：

部分网站右下角没有“返回顶部”的按钮，每次都需要使用键盘或者鼠标上翻，比较费事。

网上搜了下，发现可以通过油猴脚本来实现。

(下面的脚本内容来做网上）

// ==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: 70px;
    height: 70px;
    border-radius: 50%;
    font-size: 10px;
    z-index: 999;
    cursor: pointer;
    font-size: 10px;
    overflow: hidden;
    }`
    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
    body.appendChild(toTopBtn)
    body.appendChild(style)
    // Your code here...
})();

添加后保存即可。

然后刷新浏览器的页面，可以看到右下角自动加上了“ 返回顶部”的按钮。