如何处理html页面的滚动事件

Question

想实现当用户将页面滚动到底部时，应用显示返回顶部的按钮（之前是隐藏的）。为了实现这个功能需要跟踪页面的滚动事件，需要判断页面是否已经滚动到了底部。查了一下相关文档，碰到了问题，判断滚动事件，用body.onscroll还是window.onscroll，为什么？判断滚动的位置，用body.scrollTop，document.document.scrollTop，还是window.scrollY，为什么？不同浏览器实现的方式不一样吗？是否用DOCTYPE也有影响？

Answer 1

原生JavaScript：

 $(window).scroll(function(event){  
    var wScrollY = window.scrollY; // 当前滚动条位置    
    var wInnerH  = window.innerHeight; // 设备窗口的高度（不会变）    
    var bScrollH = document.body.scrollHeight; // 滚动条总高度        
    if (wScrollY + wInnerH >= bScrollH) {            
        console.log("到底了.");
    }    
});

JQuery ：

$(window).scroll(function () {    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {        
        console.log("到底了.");
    }
});

原理都是一样的：滚动底部的条件是: 滚动的高度 + windows 窗口高度 >= 滚动条总高度