判断scroll滚动到底部以及实现回到顶部
介绍一下如何在srcoll滚动到指定位置后执行指定函数和如何实现回到顶部功能。
目录：
- 判断scroll滚动到底部以及实现回到顶部
- js实现
- jQuery实现
- 回到顶部
js实现
window.onscroll = function(){
var clientHeight = document.documentElement.clientHeight;
var scrollTop = document.body.scrollTop;
var scrollHeight = document.body.scrollHeight;
if(scrollTop + clientHeight == scrollHeight){
console.log("到底部了！");
}
} GlobalEventHandlers.onscroll 是元素的 scroll 事件处理函数，所以每当浏览器的滚动条发生改变的时候，便执行 window.onscroll 函数。
Element.clientHeight 返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距，我们用它来获取浏览器内容可视区域的高度。
使用 document.documentElement.clientHeight 获取浏览器视口大小，documentElement 是整个节点树的根节点root，即
<html>标签，若使用 document.body.clientHeight ，则得到的数值和 document.body.scrollHeight 一样。
Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数，即滚动条在Y轴上的滚动距离。
Element.scrollHeight 是计量元素内容高度的只读属性，包括overflow样式属性导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的margin，即内容可视区域加上溢出区域的总高度。
由此我们可以看到，滚动条滚到底部的条件是 scrollTop + clientHeight == scrollHeight，所以当滚动条达到底部时候满足条件，便会执行我们写好的函数。
当然，如果想实现在滚动条准备滑动准备到底部之前执行函数（比如准备滚到底部时网页可以开始加载新内容）的话，可以这样写条件(scrollTop + clientHeight) / scrollHeight >= 0.9，该条件会在滚动条滚动距离超过 90% 的时候为真。
jQuery实现
我们也可以用 jQuery 更加简单的实现：
$(window).scroll(function(){
var clientHeight = $(this).height();
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
if(scrollTop + clientHeight == scrollHeight){
alert("到底部了！");
}
});回到顶部
我们可以把 Element.scrollTop 的值赋值为 0 实现回到顶部：
document.body.scrollTop = 0- 1
也可以使用 JS 的 scrollTo(xpos,ypos) 函数：
window.scrollTo(0，0);- 1
xpos 是指要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 是指要在窗口文档显示区左上角显示的文档的 y 坐标。
也可以使用 scrollBy(xnum,ynum) 函数。
xnum 是指把文档向右滚动的像素数。
ynum 是指把文档向下滚动的像素数。
这样子实现回到顶部非常生硬，一下子直接跳到顶部了，我们可以通过设置定时器的方法实现每过一段时间（非常短）把 scrollTop 逐渐减小：
function returnTop() {
//向上滑动
window.scrollBy(0,-100);
if(document.body.scrollTop>0) {
setTimeout('returnTop()',10);
}
}当然，最简单的还是使用 jQuery 来实现：
$('body,html').animate({scrollTop:0},"normal"); - 1
其中，根据需要可以选择三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。