scroll up and down buttons

Add up/down navigation buttons to scroll to top or bottom of the page, but hide during fullscreen
Від 16.08.2025. Дивіться остання версія.
Задати запитання, залишити відгук, або повідомити про скрипт.
Wrap lines
// ==UserScript==
// @name         scroll up and down buttons
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Add up/down navigation buttons to scroll to top or bottom of the page, but hide during fullscreen
// @author       You
// @match        *://*/*
// @license Apache 2.0
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    if (window.top !== window.self) return;
    if (document.body && document.body.children.length === 1) {
    const onlyChild = document.body.children[0];
    const tag = onlyChild.tagName.toLowerCase();
    if (['img', 'video', 'audio', 'embed', 'object'].includes(tag)) return;
    }


    let scrollAnimationId = null;

    function smoothScrollTo(targetY) {
        if (scrollAnimationId) cancelAnimationFrame(scrollAnimationId);

        const startY = window.scrollY;
        const distance = targetY - startY;
        const duration = 1000;
        const startTime = performance.now();

        function step(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const ease = progress < 0.5
                ? 2 * progress * progress
                : -1 + (4 - 2 * progress) * progress;

            window.scrollTo(0, startY + distance * ease);

            if (progress < 1) {
                scrollAnimationId = requestAnimationFrame(step);
            } else {
                scrollAnimationId = null;
            }
        }

        scrollAnimationId = requestAnimationFrame(step);
    }

    function stopScroll() {
        if (scrollAnimationId) {
            cancelAnimationFrame(scrollAnimationId);
            scrollAnimationId = null;
        }
    }

    ['mousedown', 'wheel', 'touchstart', 'keydown'].forEach(evt => {
        window.addEventListener(evt, stopScroll, { passive: true });
    });

    const container = document.createElement('div');
    container.style.position = 'fixed';
    container.style.bottom = '10px';
    container.style.right = '10px';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '5px';
    container.style.zIndex = '9999999';
    container.style.pointerEvents = 'auto';

    const buttonStyle = `
        background-color: #333;
        color: white;
        font-size: 17px;
        padding: 8px 12px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        transition: background-color 0.3s;
    `;

    const upBtn = document.createElement('button');
    upBtn.textContent = '▲';
    upBtn.setAttribute('style', buttonStyle);
    upBtn.title = 'Scroll to top';
    upBtn.onclick = () => smoothScrollTo(0);

    const downBtn = document.createElement('button');
    downBtn.textContent = '▼';
    downBtn.setAttribute('style', buttonStyle);
    downBtn.title = 'Scroll to bottom';
    downBtn.onclick = () => smoothScrollTo(document.body.scrollHeight);

    container.appendChild(upBtn);
    container.appendChild(downBtn);
    document.body.appendChild(container);

    document.addEventListener('fullscreenchange', () => {
        container.style.display = document.fullscreenElement ? 'none' : 'flex';
    });
})();