MediaWiki:Gadget-backToTop.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* global mw, $ */
(function () {
  'use strict';

  var BTN_ID = 'gadget-backtotop';

  function buildButton() {
    if (document.getElementById(BTN_ID)) return;

    // Anchor provides #top fallback even if JS scroll fails
    var $a = $('<a>', {
      id: BTN_ID,
      href: '#top',
      title: 'Back to top',
      'aria-label': 'Back to top'
    });

    // icon + label (label hidden on mobile via CSS)
    $a.append($('<span>', { class: 'btt-icon', text: '↑', 'aria-hidden': 'true' }));
    $a.append($('<span>', { class: 'btt-label', text: 'Back to Top' }));

    $(document.body).append($a);

    function setVisible() {
      var y = window.pageYOffset || document.documentElement.scrollTop || 0;
      $a.toggleClass('is-visible', y > 400);
    }

    // Smooth scroll when possible; otherwise browser jumps via #top
    $a.on('click', function (e) {
      // If the browser supports smooth scrolling, prevent default anchor jump
      // and do a smooth scroll instead.
      try {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
        // Update URL hash only if you want it; most wikis prefer not to.
        // history.replaceState(null, document.title, window.location.pathname + window.location.search);
      } catch (err) {
        // Fall back to anchor behavior
      }
    });

    $(window).on('scroll resize', setVisible);
    setVisible();
  }

  // Ensure it appears even when content is swapped/re-rendered
  mw.hook('wikipage.content').add(function () {
    buildButton();
  });
})();