☰

Wikipedia Smooth Scroll

Adds smooth scrolling for in-page links on Wikipedia and sister sites

  1. // ==UserScript==
  2. // @name         Wikipedia Smooth Scroll
  3. // @description  Adds smooth scrolling for in-page links on Wikipedia and sister sites
  4. // @version      0.2
  5. // @author       Daniel Bronshtein
  6. // @license      MIT
  7. // @homepage     https://github.com/DaniBr/wikipedia-smooth-scroll
  8. // @grant        none
  9. // @run-at       document-idle
  10. // @match https://*.wikipedia.org/wiki/*
  11. // @match https://*.wiktionary.org/wiki/*
  12. // @match https://*.wikibooks.org/wiki/*
  13. // @match https://*.wikiquote.org/wiki/*
  14. // @match https://*.wikivoyage.org/wiki/*
  15. // @match https://*.wikisource.org/wiki/*
  16. // @match https://*.wikinews.org/wiki/*
  17. // @match https://*.wikiversity.org/wiki/*
  18. // @match https://*.wikifunctions.org/wiki/*
  19. // @namespace https://greasyfork.org/users/1450663
  20. // ==/UserScript==
  21. (function(){
  22.   function scrollSmoothlyTo(element) {
  23.     element.scrollIntoView({
  24.       behavior: 'smooth'
  25.     })
  26.   }
  27.   
  28.   function getIdFromInternalLink(link) {
  29.     try {
  30.       return decodeURIComponent(link.getAttribute('href').substring(1))
  31.     } catch (e) {
  32.       return link.getAttribute('href').substring(1)
  33.     }
  34.   }
  35.   
  36.   function handleInternalLinkClick(event) {
  37.     const link = event.currentTarget
  38.     const id = getIdFromInternalLink(link)
  39.     const element = document.getElementById(id)
  40.     
  41.     if (!element) return
  42.     scrollSmoothlyTo(element)
  43.     history.pushState({ scrollTo: id }, '', link.href)
  44.     event.preventDefault()
  45.   }
  46.   
  47.   document.querySelectorAll("a[href^='#']").forEach(link => {
  48.     link.addEventListener('click', handleInternalLinkClick)
  49.   })
  50.   
  51.   //ToDo: add smooth scrolling on popstate (when navigating back and forward)
  52. })()