scroll up and down buttons

Add up/down navigation buttons to scroll to top or bottom of the page, but hide during fullscreen
Verzia zo dňa 16.08.2025. Pozri najnovšiu verziu.
Spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.
Zalomiť riadky
// ==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';
    });
})();