请给我代码通过油猴脚本在网页上class为feedback-ball-wrapper react-draggable react-draggable-draggedstyle为transform translate0px 0px;的div上方覆盖一个同样大小的div实现点击这个新div则可以回到网页顶部
以下是使用油猴脚本实现点击覆盖div回到网页顶部的代码:
// ==UserScript==
// @name Scroll to Top Button
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Add a button to scroll to the top of the page when clicked on a specific div
// @author Your Name
// @match http://*/*
// @match https://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创建并设置返回顶部按钮
function createScrollToTopButton() {
var button = document.createElement('div');
button.style.position = 'fixed';
button.style.bottom = '20px';
button.style.right = '20px';
button.style.width = '50px';
button.style.height = '50px';
button.style.background = 'grey';
button.style.borderRadius = '50%';
button.style.display = 'none';
button.style.cursor = 'pointer';
button.style.zIndex = '9999';
button.addEventListener('click', scrollToTop);
document.body.appendChild(button);
return button;
}
// 显示或隐藏返回顶部按钮
function toggleScrollToTopButton() {
var button = document.getElementById('scrollToTopButton');
var feedbackBall = document.querySelector('.feedback-ball-wrapper.react-draggable.react-draggable-dragged');
if (feedbackBall && feedbackBall.style.transform === 'translate(0px, 0px)') {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
}
// 滚动到页面顶部
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
// 初始化
function init() {
var button = createScrollToTopButton();
button.id = 'scrollToTopButton';
setInterval(toggleScrollToTopButton, 100);
}
init();
})();
请将上述代码复制到油猴脚本编辑器中,保存即可使用。当页面上的class为"feedback-ball-wrapper react-draggable react-draggable-dragged"的div的样式为"transform: translate(0px, 0px);"时,会在页面右下角显示一个返回顶部的按钮。点击该按钮即可回到页面顶部。
原文地址: https://www.cveoy.top/t/topic/i4cq 著作权归作者所有。请勿转载和采集!