Greasy Fork

Firstly, nice script! Secondly, I noticed that if the page employed lazy-loading, the scroll-to-top button would disappear when scrolling further. I have made some modifications to mitigate this by watching for modifications to the DOM. Feel free to update your script.

// ==UserScript==
// @name        Scroll to Top Button
// @namespace   sttb-ujs-dxrk1e
// @description  Adds a scroll to top button at the bottom right of the page when scrolled to the bottom, and hides it at the top.
// @icon https://i.imgur.com/FxF8TLS.png
// @match       *://*/*
// @grant       none
// @version     1.6.1
// @author      DXRK1E | Modified by LeFiXER
// @license MIT
// @downloadURL https://update.greasyfork.org/scripts/501625/Scroll%20to%20Top%20Button.user.js
// @updateURL https://update.greasyfork.org/scripts/501625/Scroll%20to%20Top%20Button.meta.js
// ==/UserScript==

(function() {
    'use strict';

    // Create the button
    const scrollToTopButton = document.createElement('button');
    scrollToTopButton.innerText = '↑';
    scrollToTopButton.style.position = 'fixed';
    scrollToTopButton.style.bottom = '20px';
    scrollToTopButton.style.right = '20px';
    scrollToTopButton.style.width = '40px';
    scrollToTopButton.style.height = '40px';
    scrollToTopButton.style.fontSize = '16px';
    scrollToTopButton.style.backgroundColor = '#333';
    scrollToTopButton.style.color = '#FFF';
    scrollToTopButton.style.border = 'none';
    scrollToTopButton.style.borderRadius = '50%';
    scrollToTopButton.style.cursor = 'pointer';
    scrollToTopButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
    scrollToTopButton.style.opacity = '0';
    scrollToTopButton.style.visibility = 'hidden';
    scrollToTopButton.style.zIndex = '1000';
    scrollToTopButton.style.transition = 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out';

    // Append the button to the body
    document.body.appendChild(scrollToTopButton);

    // Function to handle scrolling
    function handleScroll() {
        const scrolledFromTop = window.scrollY || document.documentElement.scrollTop;
        const initialHeight = window.innerHeight; // Height of the initial page view

        // Show the button if the user has scrolled more than the initial page height
        if (scrolledFromTop > initialHeight) {
            scrollToTopButton.style.visibility = 'visible';
            scrollToTopButton.style.opacity = '1';
        } else {
            scrollToTopButton.style.opacity = '0';
            scrollToTopButton.style.visibility = 'hidden';
        }
    }

    // Function to scroll to top
    function scrollToTop() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // Mutation-observer to monitor DOM changes (for lazy-loaded content)
    const observer = new MutationObserver(function() {
        handleScroll();
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Add event listeners
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleScroll); // Recalculate on resize
    handleScroll();  // Initial check
    scrollToTopButton.addEventListener('click', scrollToTop);

    console.log("Scroll to Top Button: loaded");
})();

Thank you for the feedback! Yes, this actually aligns perfectly with why I modified the original script when you first shared it - the lazy loading issue was one of the key problems I noticed. Let me highlight this:

In the updated script (v2.1.0), I implemented several mechanisms to handle lazy-loading:

1. Added MutationObserver to watch for DOM changes:

   const observer = new MutationObserver(debouncedScroll);
   observer.observe(document.body, {
   childList: true,
   subtree: true
   });
   

2. Improved scroll height calculations to account for dynamic content:

   const scrollHeight = Math.max(
   document.documentElement.scrollHeight,
   document.body.scrollHeight
   );
   

3. Enhanced the visibility logic to maintain button presence during content loading:

   function shouldShowButton() {
   const scrollHeight = Math.max(
       document.documentElement.scrollHeight,
       document.body.scrollHeight
   );
   const viewportHeight = window.innerHeight;
   const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
   
   return (
       scrollTop > CONFIG.showThreshold &&
       scrollHeight > CONFIG.minimumPageHeight &&
       scrollHeight > viewportHeight * 1.5
   );
   }
   

The original script had issues with lazy-loading because it only checked scroll position relative to the initial page height. The enhanced version actively monitors DOM changes and recalculates heights, ensuring the button remains visible and functional even as new content loads.