Eu estava experimentando com JavaScript puro e me deparei com a seguinte curiosidade:
Quando eu passo os valores de referência em relação ao topo da página para variáveis, o código não funciona, quebra.
Assim funciona:
window.onscroll = function(){
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
backToTop.style.display = "block";
} else {
backToTop.style.display = "none";
}
};
Assim não funciona:
var distanciaTopoBody = document.body.scrollTop;
var distanciaTopoHtml = document.documentElement.scrollTop;
window.onscroll = function(){
if (distanciaTopoBody > 20 || distanciaTopoHtml > 20) {
backToTop.style.display = "block";
} else {
backToTop.style.display = "none";
}
};
Percebam que o código não muda muito, é uma alteração visivelmente pequena, mas o resultado é completamente diferente.
Eu só atribui document.body.scrollTop
a uma variável (distanciaTopoBody) e document.documentElement.scrollTop
à outra (distanciaTopoHtml);