jquery:点击回到顶部以及定点滚动
2016-09-20 00:00
351 查看
1、思路
DOM的每个标签以及浏览器本身都有一个scrollTop属性,这不是CSS可以控制的(目前),这个值指的是在一个指定的容器内当前可视顶部距离内容顶部的距离,如果这个容器是浏览器的话,那么滚动条的上边距就是这个值。那么,如果想要回到顶部的话,设置scrollTop的值为0即可,滚动到指定位置也可以设置这个值为指定的数值。
设置scrollTop为0:
$(window).scrollTop(0);
设置scrollTop为指定数值:
varT=200;//这个是number类型,不需要带px
$(window).scrollTop(T);
2、方法
如1设置的话,浏览器会在瞬间改变滚动条的位置,没有滚动的效果。如果要滚动的话,我们就需要慢慢的改变scrollTop的值就好。那么如何来做呢?依照上面的经验,我们可能这么写:
varT=$(window).scrollTop();
vart=setInterval(function()
{
if(T==0)
{
clearInterval(t);
}
else
{
T-=10;
$(window).scrollTop(T);
}
},10);
这么写,完全没有错误,把设置为固定值,就可以定点滚动了。这个例子里写的是匀速滚动,当然如果为了效果好,你可以修改下T值的变动情况,使之成为变减速运动。
有没有更好的办法来简化这个过程呢?我们知道,jQuery的animation是非常著名的,可以把这个运动放在animate里来执行呢?答案是肯定的:
$(document.body).animate({'scrollTop':0},1000);
通过阅读animate的API知道,animate的其中两个参数为属性和时间(如上代码),其中属性是这么描述的“AnobjectofCSSpropertiesandvaluesthattheanimationwillmovetoward.”(参考:http://api.jquery.com/animate/),意思指的是对象的css属性和值。但我们从第一点就知道,scrollTop并不是一个css属性,这又作如何解释呢?
可以解释的是,animate的第一个参数包括的不仅仅是CSS,它涵盖了所有可以用数值来表示的window属性值(scrollTop、scrollLeft)以及dom的CSS属性值(width、top、margin-left)。
【完】
相关文章推荐
- JQuery - 点击,滚动回到顶部 / 底部刷新回到顶部
- 用jQuery为跳转链接锚点添加平滑滚动动画效果(如回到顶部
- jquery点击回到页面顶部方法
- 判断listview滚动,点击回到顶部
- JQuery点击事件回到页面顶部效果的实现代码
- jquery点击回到顶部
- jquery实现点击回到页面顶部
- jquery实现点击页面回到顶部
- [封装插件]Jquery中的CSS处理一览以及回到顶部按钮和鼠标悬停获取坐标的案例
- Angular封装指令回到顶部以及滚动到特定的页面位置
- 网站点击导航栏标题,对应的元素平滑上移以及点击图片或按钮回到页面顶部的特效
- JQuery点击事件回到页面顶部效果
- 判断scroll是否滚动到底部以及实现回到顶部
- JQuery回到顶部(Scroll to Top)
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- Jquery 回到顶部
- jQuery 跟随浏览器窗口的回到顶部按钮
- 不随页面滚动的元素(<回到顶部>或者是页面顶部信息之类的)
- jquery插件--回到顶部的功能
- Jquery弹出框以及跟随页面滚动