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

2019独角兽企业重金招聘Python工程师标准>>>

1、思路

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

那么，如果想要回到顶部的话，设置scrollTop的值为0即可，滚动到指定位置也可以设置这个值为指定的数值。

设置scrollTop为0：

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

设置scrollTop为指定数值：

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

 2、方法

如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）。

【完】

转载于:https://my.oschina.net/u/588516/blog/748992