ChatGPT实战100例 - (03) 网站用不惯？油猴子盘它-Toy模板网

这篇具有很好参考价值的文章主要介绍了ChatGPT实战100例 - (03) 网站用不惯？油猴子盘它。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

ChatGPT实战100例 - (03) 网站用不惯？油猴子盘它

一、需求与思路

需求：网页太长，要回顶部慢慢拖？
No，没这个功能，分分钟盘它。

操作步骤：

ChatGPT编写相关脚本
部署至浏览器，用起来

二、油猴子脚本

1.问题：
有的网页很长，我想点击按钮快速回到网页上方，写一个油猴子脚本实现它，要美观点

2.回答：
以下是一个简单的油猴脚本，可以在页面中添加一个漂亮的“回到顶部”按钮，并且在点击按钮时会平滑地滚动到页面顶部：

// ==UserScript==
// @name         Back To Top Button
// @namespace    your-namespace
// @version      1.0
// @description  Add a back to top button to quickly scroll to the top of the page
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create a button element
    var backToTopButton = document.createElement('button');
    backToTopButton.innerHTML = '↑';
    backToTopButton.style.display = 'none';
    backToTopButton.style.position = 'fixed';
    backToTopButton.style.right = '20px';
    backToTopButton.style.bottom = '20px';
    backToTopButton.style.width = '50px';
    backToTopButton.style.height = '50px';
    backToTopButton.style.borderRadius = '50%';
    backToTopButton.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
    backToTopButton.style.color = '#fff';
    backToTopButton.style.fontSize = '24px';
    backToTopButton.style.lineHeight = '50px';
    backToTopButton.style.textAlign = 'center';
    backToTopButton.style.cursor = 'pointer';

    // Add the button to the page
    document.body.appendChild(backToTopButton);

    // Show the button when the user scrolls down
    window.addEventListener('scroll', function() {
        if (document.documentElement.scrollTop > 0) {
            backToTopButton.style.display = 'block';
        } else {
            backToTopButton.style.display = 'none';
        }
    });

    // Scroll to the top of the page when the button is clicked
    backToTopButton.addEventListener('click', function() {
        var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
            window.requestAnimationFrame(scrollToTop);
        }
    });

    // Function to smoothly scroll to the top of the page
    function scrollToTop() {
        var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
            window.scrollTo(0, currentScroll - (currentScroll / 5));
            window.requestAnimationFrame(scrollToTop);
        }
    }

})();