☰

Webpage Scroll Progress Bar

Add an animated smooth webpage scroll progress bar and remove footers

  1. // ==UserScript==
  2. // @name         Webpage Scroll Progress Bar
  3. // @license      MIT
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.4
  6. // @description  Add an animated smooth webpage scroll progress bar and remove footers
  7. // @match        *://*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Create the progress bar element and style it
  15.     const progressBar = document.createElement("div");
  16.     progressBar.style.position = "fixed";
  17.     progressBar.style.bottom = "0";
  18.     progressBar.style.left = "0";
  19.     progressBar.style.width = "0";
  20.     progressBar.style.zIndex = "9999";
  21.     progressBar.style.height = "3px";
  22.     progressBar.style.backgroundColor = "red";
  23.     progressBar.style.transition = "width 0.1s ease-out";
  24.     progressBar.style.borderRadius = "10px"; // Rounded corners
  25.  
  26.     document.body.appendChild(progressBar);
  27.  
  28.     // Update progress bar on scroll
  29.     window.addEventListener("scroll", () => {
  30.         const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
  31.         const scrollProgress = (window.scrollY / scrollableHeight) * 100;
  32.         progressBar.style.width = scrollProgress + "%";
  33.  
  34.         // Change color based on scroll progress
  35.         const color = `rgb(${250 - scrollProgress * 2.55}, 0, ${scrollProgress * 9.55})`;
  36.         progressBar.style.backgroundColor = color;
  37.     });
  38.  
  39.     // Function to remove footers
  40.     function removeFooters() {
  41.         const footers = document.querySelectorAll('footer'); // Adjust selector as needed
  42.         footers.forEach(footer => {
  43.             footer.remove(); // Remove the footer element
  44.         });
  45.     }
  46.  
  47.     // Call removeFooters function when the document is ready
  48.     document.addEventListener('DOMContentLoaded', removeFooters);
  49. })();