Feature Request: Scroll to top button

[designnerd]

Feature request: Adding a Top button to scroll back to the top on longer pages. :)

[designnerd]

A temporary workaround:

In MediaWiki:Common.js add the following: mw.loader.load( '/index.php?title=MediaWiki:Scroll-to-Top.js&action=raw&ctype=text/javascript' );

Create a MediaWiki:Scroll-to-Top.js and put the following in it:

/* -- SCROLL TO TOP BUTTON -- */
/* Insert Top Button after Body Content */
$(function() {
  $('<button onclick="topFunction()" id="topBtn" title="Go to top"></button>').insertAfter('div#mw-content-text');
});

// When users scroll down 100px, show the Top button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    document.getElementById("topBtn").style.display = "block";
  } else {
    document.getElementById("topBtn").style.display = "none";
  }
}

// When users click on Top button, scroll up
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

In MediaWiki:Pivot.css add some CSS to style it (I use a font-awesome arrow-up):

/* ---- Scroll to Top button ---- */
#topBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 16px;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  cursor: pointer;
  padding: 20px;
  border-radius: 4px;
}
#topBtn:hover {
  background-color: #555;
}
#topBtn:before {
    position: fixed;
    bottom: 40px;
    right: 44px;
    color: #fff;
    font-size: 18px;
    font-family: 'FontAwesome' !important;
    content: "\f106";
    font-weight: 600;
}