Open designnerd opened 5 years ago
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;
}
Feature request: Adding a Top button to scroll back to the top on longer pages. :)