☰

scroll up and down buttons

Add up/down navigation buttons to scroll to top or bottom of the page, but hide during fullscreen

// ==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';
    });
})();