您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
简约的滚动按钮
- // ==UserScript==
- // @name ScrollBuddy
- // @namespace https://greasyfork.org/en/users/1451802
- // @version 1.0
- // @license MIT
- // @description Minimalist button for scrolling
- // @description:de Minimalistische Schaltfläche zum Scrollen
- // @description:es Botón minimalista para desplazarse
- // @description:fr Bouton minimaliste pour scroller
- // @description:it Pulsante minimalista per lo scorrimento
- // @description:ru Минималистичная кнопка для прокрутки
- // @description:zh-CN 简约的滚动按钮
- // @description:zh-TW 簡約的捲動按鈕
- // @description:ja ミニマリストスクロールボタン
- // @description:ko 미니멀리스트 스크롤 버튼
- // @author NormalRandomPeople (https://github.com/NormalRandomPeople)
- // @icon https://www.svgrepo.com/show/533633/arrows-up-down.svg
- // @match *://*/*
- // @grant GM_addStyle
- // @run-at document-end
- // @compatible chrome
- // @compatible firefox
- // @compatible opera
- // @compatible brave
- // ==/UserScript==
- (function() {
- 'use strict';
- if (window !== window.top) {
- return;
- }
- if (document.querySelector('.scroll-toggle-button')) {
- return;
- }
- let smoothScrolling = localStorage.getItem('smoothScrolling') !== null ? JSON.parse(localStorage.getItem('smoothScrolling')) : true;
- let fixToBottom = localStorage.getItem('fixToBottom') !== null ? JSON.parse(localStorage.getItem('fixToBottom')) : false;
- let fixToTop = localStorage.getItem('fixToTop') !== null ? JSON.parse(localStorage.getItem('fixToTop')) : false;
- const button = document.createElement('button');
- button.className = 'scroll-toggle-button';
- button.textContent = '↓';
- button.style.position = 'fixed';
- button.style.bottom = '20px';
- button.style.right = '20px';
- button.style.zIndex = '9999999999';
- button.style.padding = '12px';
- button.style.borderRadius = '50%';
- button.style.backgroundColor = '#333';
- button.style.color = 'white';
- button.style.border = 'none';
- button.style.fontSize = '30px';
- button.style.cursor = 'pointer';
- button.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.3)';
- button.style.outline = 'none';
- function updateButton() {
- if (fixToTop) {
- button.textContent = '↑';
- button.onclick = () => scrollToTop();
- } else if (fixToBottom) {
- button.textContent = '↓';
- button.onclick = () => scrollToBottom();
- } else {
- const isAtBottom = (window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight;
- const isAtTop = window.scrollY === 0;
- if (isAtTop) {
- button.textContent = '↓';
- button.onclick = () => scrollToBottom();
- } else if (isAtBottom) {
- button.textContent = '↑';
- button.onclick = () => scrollToTop();
- }
- }
- }
- function scrollToBottom() {
- window.scrollTo({ top: document.documentElement.scrollHeight - window.innerHeight, behavior: smoothScrolling ? 'smooth' : 'auto' });
- }
- function scrollToTop() {
- window.scrollTo({ top: 0, behavior: smoothScrolling ? 'smooth' : 'auto' });
- }
- updateButton();
- window.addEventListener('scroll', updateButton);
- document.body.appendChild(button);
- GM_addStyle(`
- .scroll-toggle-button:hover {
- background-color: #555;
- transform: scale(1.1);
- }
- .scroll-toggle-button:active {
- transform: scale(0.95);
- }
- .custom-context-menu div {
- padding: 8px 15px;
- cursor: pointer;
- transition: background-color 0.2s ease;
- text-align: left;
- }
- .custom-context-menu div:hover {
- background-color: #444;
- }
- .custom-context-menu div:active {
- background-color: #555;
- }
- .custom-context-menu div.selected {
- background-color: #333;
- }
- `);
- function createContextMenu(event) {
- event.preventDefault();
- const existingMenu = document.querySelector('.custom-context-menu');
- if (existingMenu) {
- existingMenu.remove();
- }
- const menu = document.createElement('div');
- menu.className = 'custom-context-menu';
- menu.style.position = 'absolute';
- menu.style.backgroundColor = '#333';
- menu.style.color = 'white';
- menu.style.borderRadius = '5px';
- menu.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.3)';
- menu.style.padding = '10px';
- menu.style.fontFamily = 'Arial, sans-serif';
- menu.style.fontSize = '14px';
- menu.style.zIndex = '99999999999';
- const buttonRect = button.getBoundingClientRect();
- let menuLeft = buttonRect.left + window.scrollX - 220;
- let menuTop = buttonRect.top + window.scrollY - 130;
- const screenWidth = window.innerWidth;
- const menuWidth = 150;
- const marginRight = 30;
- if (menuLeft + menuWidth > screenWidth - marginRight) {
- menuLeft = screenWidth - menuWidth - marginRight;
- }
- const screenHeight = window.innerHeight;
- if (menuTop < 0) {
- menuTop = buttonRect.bottom + window.scrollY + 20;
- }
- menu.style.left = `${menuLeft}px`;
- menu.style.top = `${menuTop}px`;
- const smoothScrollingOption = document.createElement('div');
- smoothScrollingOption.textContent = smoothScrolling ? '✓ Enable Smooth Scrolling' : 'Enable Smooth Scrolling';
- smoothScrollingOption.onclick = () => {
- smoothScrolling = !smoothScrolling;
- localStorage.setItem('smoothScrolling', smoothScrolling);
- updateButton();
- menu.remove();
- };
- const fixToBottomOption = document.createElement('div');
- fixToBottomOption.textContent = fixToBottom ? '✓ Fix to Bottom' : 'Fix to Bottom';
- fixToBottomOption.onclick = () => {
- fixToBottom = !fixToBottom;
- if (fixToBottom) {
- fixToTop = false;
- }
- localStorage.setItem('fixToBottom', fixToBottom);
- localStorage.setItem('fixToTop', fixToTop);
- updateButton();
- menu.remove();
- };
- const fixToTopOption = document.createElement('div');
- fixToTopOption.textContent = fixToTop ? '✓ Fix to Top' : 'Fix to Top';
- fixToTopOption.onclick = () => {
- fixToTop = !fixToTop;
- if (fixToTop) {
- fixToBottom = false;
- }
- localStorage.setItem('fixToTop', fixToTop);
- localStorage.setItem('fixToBottom', fixToBottom);
- updateButton();
- menu.remove();
- };
- menu.appendChild(smoothScrollingOption);
- menu.appendChild(fixToBottomOption);
- menu.appendChild(fixToTopOption);
- document.body.appendChild(menu);
- document.addEventListener('click', () => menu.remove(), { once: true });
- }
- button.addEventListener('contextmenu', createContextMenu);
- })();