I am using this
$(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;
}
Which works fine on all browsers apart from Firefox. In this case, it is displayed in the middle of the screen and does not stick at the bottom right when scrolling.
The css I use is this:
#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: 2px;
right: 36px;
color: #fff;
font-size: 42px;
font-family: 'Georgia';
content: "^";
font-weight: 600;
}
Reference page: https://lsj.gr/wiki/%CE%BB%CE%BF%CF%8D%CF%89
You need to add position: fixed; to the button. Then you can position it with left, right, bottom and top.
$(function() {
$('<button onclick="topFunction()" id="topBtn" title="Go to top">Click</button>').insertAfter('div#mw-content-text');
});#mw-content-text {
height: 100px;
width: 100px;
background: green;
}
#topBtn {
position: fixed;
right: 30px;
bottom: 30px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mw-content-text"></div>