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 elementvar 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 pagedocument.body.appendChild(backToTopButton);// Show the button when the user scrolls downwindow.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 clickedbackToTopButton.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 pagefunction scrollToTop() {var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;if (currentScroll > 0) {window.scrollTo(0, currentScroll - (currentScroll / 5));window.requestAnimationFrame(scrollToTop);}}})();