博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery:点击回到顶部以及定点滚动
阅读量:6430 次
发布时间:2019-06-23

本文共 1109 字,大约阅读时间需要 3 分钟。

hot3.png

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

你可能感兴趣的文章
90%人都不知道:SVN 和 Git 的一些误解和真相
查看>>
防火墙配置十大任务之九,验证防火墙的运行
查看>>
【linux】浅谈Linux下的 find 指令
查看>>
CentOS 7 使用kubeadm 部署 Kubernetes
查看>>
我的友情链接
查看>>
java学习第一天1.2
查看>>
清空输入缓冲区的方法
查看>>
Yii2 项目优化小贴士
查看>>
UIScrollView的判断位置的属性如下:
查看>>
Applicatin Loader上传app步骤记录
查看>>
两种方法修改table表的内容
查看>>
张小龙莫慌 马化腾莫急 你们要好好的 微信还有时间
查看>>
一些常用软件静默安装参数(nsis,msi,InstallShield ,Inno)
查看>>
部署mimic版本的Ceph分布式存储系统
查看>>
Java缓冲流细节
查看>>
IOS中复制对象的用法及深拷贝和浅拷贝详解
查看>>
lfs
查看>>
Eclipse内存不够解决办法
查看>>
关于tbody js取法兼容。
查看>>
[CC]点云密度计算
查看>>