MediaWiki:Gadget-backToTop.js: Difference between revisions

/* 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) {
	  // Smooth scroll when possible; otherwise allow #top jump
	  try {
	    e.preventDefault();
	    window.scrollTo({ top: 0, behavior: 'smooth' });
	
	    // Force visibility update after the scroll completes.
	    // Smooth scrolling doesn't always trigger a final scroll event consistently across browsers.
	    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();
  });
})();