scroll up and down buttons

Add up/down navigation buttons to scroll to top or bottom of the page, hide during fullscreen, plus small toggle to make buttons transparent
Verze ze dne 22. 09. 2025. Zobrazit nejnovější verzi.
Nainstalovat skript ?
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name         scroll up and down buttons
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Add up/down navigation buttons to scroll to top or bottom of the page, hide during fullscreen, plus small toggle to make buttons transparent
// @author       You
// @match        *://*/*
// @grant        none
// @license Apache 2.0
// ==/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 });
    });

    // --- Styles (use classes so toggling is easy) ---
    const style = document.createElement('style');
    style.textContent = `
        .tm-scroll-container { position: fixed; bottom: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 9999999; pointer-events: auto; align-items: center; }
        .tm-scroll-btn { 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.2s, opacity 0.2s; }
        .tm-toggle-btn { width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: 14px; display:flex; align-items:center; justify-content:center; background-color: #555; color: #fff; border:none; cursor:pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
        .tm-scroll-btn.transparent { opacity: 0; }
        .tm-scroll-btn.transparent { opacity: 0.1; }
        .tm-toggle-btn.active { background-color: #1a73e8; color: #fff; }
    `;
    document.head.appendChild(style);

    // Container
    const container = document.createElement('div');
    container.className = 'tm-scroll-container';

    // Toggle button (small, visible)
    const toggleBtn = document.createElement('button');
    toggleBtn.className = 'tm-toggle-btn';
    toggleBtn.title = 'Toggle button transparency';
    toggleBtn.setAttribute('aria-pressed', 'false');
    toggleBtn.textContent = '◐'; // icon-like visual
    container.appendChild(toggleBtn);

    // Up button
    const upBtn = document.createElement('button');
    upBtn.className = 'tm-scroll-btn';
    upBtn.textContent = '▲';
    upBtn.title = 'Scroll to top';
    upBtn.onclick = () => smoothScrollTo(0);

    // Down button
    const downBtn = document.createElement('button');
    downBtn.className = 'tm-scroll-btn';
    downBtn.textContent = '▼';
    downBtn.title = 'Scroll to bottom';
    downBtn.onclick = () => smoothScrollTo(document.documentElement.scrollHeight || document.body.scrollHeight);

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

    // Persisted state key
    const STORAGE_KEY = 'tm_scroll_transparent_v1';

    // Apply saved state (if any)
    function applyTransparencyState(state) {
        if (state) {
            upBtn.classList.add('transparent');
            downBtn.classList.add('transparent');
            toggleBtn.classList.add('active');
            toggleBtn.setAttribute('aria-pressed', 'true');
            toggleBtn.textContent = '◑';
        } else {
            upBtn.classList.remove('transparent');
            downBtn.classList.remove('transparent');
            toggleBtn.classList.remove('active');
            toggleBtn.setAttribute('aria-pressed', 'false');
            toggleBtn.textContent = '◐';
        }
        try {
            localStorage.setItem(STORAGE_KEY, state ? '1' : '0');
        } catch (e) { /* ignore storage errors */ }
    }

    // Initialize from storage
    let saved = null;
    try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) { saved = null; }
    applyTransparencyState(saved === '1');

    // Toggle handler
    toggleBtn.addEventListener('click', (e) => {
        const enabled = upBtn.classList.contains('transparent');
        applyTransparencyState(!enabled);
        // keep the small toggle visible (we only change the two main buttons)
        e.stopPropagation();
    });

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

    // Ensure container is removed/hidden on pages that replace body later (basic guard)
    const observer = new MutationObserver(() => {
        if (!document.body || document.body.contains(container) === false) {
            if (document.body) document.body.appendChild(container);
        }
    });
    observer.observe(document.documentElement || document, { childList: true, subtree: true });

})();