estoy usando esto
$(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; }Que funciona bien en todos los navegadores excepto en Firefox. En este caso, se muestra en el medio de la pantalla y no se pega en la parte inferior derecha al hacer scroll.
El css que uso es este:
#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; }Página de referencia: https://lsj.gr/wiki/%CE%BB%CE%BF%CF%8D%CF%89
Necesita agregar position: fixed; al botón. Luego puede colocarlo con left , right , bottom y 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>