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) {
	  try {
	    e.preventDefault();
	
	    // Remove focus so :focus can't keep it visible
	    this.blur();
	
	    window.scrollTo({ top: 0, behavior: 'smooth' });
	
	    window.setTimeout(setVisible, 250);
	    window.setTimeout(setVisible, 600);
	  } 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();
  });
})();