Top/Bottom Navigation Buttons

Adds sleek top and bottom navigation buttons with hover scrolling functionality for all websites
换行
// ==UserScript==
// @name         Top/Bottom Navigation Buttons
// @namespace    https://openuserjs.org/
// @version      1.0.0
// @description  Adds sleek top and bottom navigation buttons with hover scrolling functionality for all websites
// @author       r3dhack3r
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    // Create CSS styles
    const style = document.createElement('style');
    style.textContent = `
        .nav-button {
            position: fixed;
            right: 20px;
            top: 50%;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 6px;
            cursor: pointer;
            z-index: 10000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
        }
        
        .nav-button:hover {
            background: rgba(255, 255, 255, 1);
            border-color: rgba(0, 0, 0, 0.15);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            transform: scale(1.05);
        }
        
        .nav-button:active {
            transform: scale(0.95);
            transition: all 0.1s ease;
        }
        
        .nav-button svg {
            width: 16px;
            height: 16px;
            fill: #374151;
            transition: all 0.25s ease;
        }
        
        .nav-button:hover svg {
            fill: #1f2937;
        }
        
        .nav-button.top {
            transform: translateY(-24px);
            opacity: 0;
            visibility: hidden;
        }
        
        .nav-button.bottom {
            transform: translateY(24px);
            opacity: 0;
            visibility: hidden;
        }
        
        .nav-button.visible {
            opacity: 1;
            visibility: visible;
        }
        
        .nav-button.scrolling {
            background: rgba(249, 250, 251, 1);
            border-color: rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        }
    `;
    document.head.appendChild(style);
 
    // Create top button
    const topButton = document.createElement('button');
    topButton.className = 'nav-button top';
    topButton.innerHTML = `
        <svg viewBox="0 0 24 24">
            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/>
        </svg>
    `;
 
    // Create bottom button
    const bottomButton = document.createElement('button');
    bottomButton.className = 'nav-button bottom';
    bottomButton.innerHTML = `
        <svg viewBox="0 0 24 24">
            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
        </svg>
    `;
 
    // Add buttons to page
    document.body.appendChild(topButton);
    document.body.appendChild(bottomButton);
 
    // Scroll variables
    let scrollInterval;
    let isScrolling = false;
 
    // Smooth scroll function
    function smoothScroll(targetY, duration = 800) {
        const startY = window.pageYOffset;
        const distance = targetY - startY;
        const startTime = performance.now();
        
        function easeInOutCubic(t) {
            return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
        }
        
        function step(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const easedProgress = easeInOutCubic(progress);
            
            window.scrollTo(0, startY + distance * easedProgress);
            
            if (progress < 1) {
                requestAnimationFrame(step);
            }
        }
        
        requestAnimationFrame(step);
    }
 
    // Continuous scroll function
    function startContinuousScroll(direction) {
        if (isScrolling) return;
        
        isScrolling = true;
        const button = direction === 'up' ? topButton : bottomButton;
        button.classList.add('scrolling');
        
        scrollInterval = setInterval(() => {
            const scrollAmount = direction === 'up' ? -15 : 15;
            window.scrollBy(0, scrollAmount);
            
            // Stop if reached limits
            if (direction === 'up' && window.pageYOffset <= 0) {
                stopContinuousScroll();
            } else if (direction === 'down') {
                const documentHeight = Math.max(
                    document.body.scrollHeight,
                    document.body.offsetHeight,
                    document.documentElement.clientHeight,
                    document.documentElement.scrollHeight,
                    document.documentElement.offsetHeight
                );
                if ((window.innerHeight + window.pageYOffset) >= documentHeight - 10) {
                    stopContinuousScroll();
                }
            }
        }, 20);
    }
 
    function stopContinuousScroll() {
        if (scrollInterval) {
            clearInterval(scrollInterval);
            scrollInterval = null;
        }
        isScrolling = false;
        topButton.classList.remove('scrolling');
        bottomButton.classList.remove('scrolling');
    }
 
    // Button event listeners
    topButton.addEventListener('click', (e) => {
        e.preventDefault();
        smoothScroll(0);
    });
 
    bottomButton.addEventListener('click', (e) => {
        e.preventDefault();
        const documentHeight = Math.max(
            document.body.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        );
        smoothScroll(documentHeight - window.innerHeight);
    });
 
    // Hover events for continuous scrolling
    topButton.addEventListener('mouseenter', () => {
        setTimeout(() => {
            if (topButton.matches(':hover')) {
                startContinuousScroll('up');
            }
        }, 500); // Delay before starting continuous scroll
    });
 
    topButton.addEventListener('mouseleave', stopContinuousScroll);
 
    bottomButton.addEventListener('mouseenter', () => {
        setTimeout(() => {
            if (bottomButton.matches(':hover')) {
                startContinuousScroll('down');
            }
        }, 500); // Delay before starting continuous scroll
    });
 
    bottomButton.addEventListener('mouseleave', stopContinuousScroll);
 
    // Show/hide buttons based on scroll position
    function updateButtonVisibility() {
        const scrollTop = window.pageYOffset;
        const documentHeight = Math.max(
            document.body.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        );
        const windowHeight = window.innerHeight;
        
        // Show top button if scrolled down
        if (scrollTop > 200) {
            topButton.classList.add('visible');
        } else {
            topButton.classList.remove('visible');
        }
        
        // Show bottom button if not at bottom
        if (scrollTop + windowHeight + 100 < documentHeight) {
            bottomButton.classList.add('visible');
        } else {
            bottomButton.classList.remove('visible');
        }
    }
 
    // Throttled scroll listener
    let scrollTimeout;
    window.addEventListener('scroll', () => {
        if (scrollTimeout) {
            clearTimeout(scrollTimeout);
        }
        scrollTimeout = setTimeout(updateButtonVisibility, 10);
    });
 
    // Initial visibility check
    setTimeout(updateButtonVisibility, 100);
 
    // Keyboard shortcuts (optional)
    document.addEventListener('keydown', (e) => {
        if (e.ctrlKey || e.metaKey) {
            if (e.key === 'Home') {
                e.preventDefault();
                smoothScroll(0);
            } else if (e.key === 'End') {
                e.preventDefault();
                smoothScroll(document.body.scrollHeight - window.innerHeight);
            }
        }
    });
 
})();