jquery：点击回到顶部以及定点滚动

一、思路

DOM的每一个标签以及浏览器自己都有一个scrollTop属性，这不是CSS能够控制的（目前），这个值指的是在一个指定的容器内当前可视顶部距离内容顶部的距离，若是这个容器是浏览器的话，那么滚动条的上边距就是这个值。

那么，若是想要回到顶部的话，设置scrollTop的值为0便可，滚动到指定位置也能够设置这个值为指定的数值。

设置scrollTop为0：

1. $(window).scrollTop(0);

设置scrollTop为指定数值：

1. var T=200;//这个是number类型，不须要带px
2. $(window).scrollTop(T);

 二、方法

如1设置的话，浏览器会在瞬间改变滚动条的位置，没有滚动的效果。若是要滚动的话，咱们就须要慢慢的改变scrollTop的值就好。那么如何来作呢？

依照上面的经验，咱们可能这么写：

1. var T=$(window).scrollTop();
2. var t=setInterval(function()
3. {
4. if(T==0)
5. {
6. clearInterval(t);
7. }
8. else
9. {
10. T-=10;
11. $(window).scrollTop(T);
12. }
13. },10);

这么写，彻底没有错误，把设置为固定值，就能够定点滚动了。这个例子里写的是匀速滚动，固然若是为了效果好，你能够修改下T值的变更状况，使之成为变减速运动。

有没有更好的办法来简化这个过程呢？咱们知道，jQuery的animation是很是著名的，能够把这个运动放在animate里来执行呢？答案是确定的：

1. $(document.body).animate({'scrollTop':0},1000);

经过阅读animate的API知道，animate的其中两个参数为属性和时间（如上代码），其中属性是这么描述的“An object of CSS properties and values that the animation will move toward.”（参考：http://api.jquery.com/animate/），意思指的是对象的css属性和值。但咱们从第一点就知 道，scrollTop并非一个css属性，这又做如何解释呢？

能够解释的是，animate的第一个参数包括的不单单是CSS，它涵盖了全部能够用数值来表示的window属性值（scrollTop、scrollLeft）以及dom的CSS属性值（width、top、margin-left）。

【完】