首页
站长论坛BBS
救助
投稿
discuz视频教程
discuz技术支持
版块
登录
快速注册

Jquery实现点击回到顶部以及定点滚动

建站高手 2015-4-17 [jQuery] 来自PC 复制链接
81915
discuz使用视频教程
31idc

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
回到顶部功能我们在很多的网站都可以看到这个功能实用并且方便大家回到顶部了,下面小编给各位介绍一个jquery实现点击回到顶部以及定点滚动例子。

1、思路

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

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

设置scrollTop为0:
  1. $(window).scrollTop(0);
  2. 设置scrollTop为指定数值:
  3. var T=200;//这个是number类型,不需要带px
  4. $(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里来执行呢?答案是肯定的:
$(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)。



上一篇:网站太大,有发现不了的死链接?我帮你解决
下一篇:phpcms v9实现文章后面添加new 图标
lgkongyaji 发表于 2015-4-17 21:53:50 来自PC
不错,支持一下
b2bw.com.cn:b2b网站大全
zhmn168 发表于 2015-4-19 22:32:45 来自PC
呵呵,在很多网站上查看下源码就能看到了。不过还是支持下
逐梦互联:www.zhmn168.com提供虚拟主机、建站服务。
ssmay2015 发表于 2015-4-20 10:22:19 来自PC
非常的有馘
洛阳app开发 发表于 2015-4-21 14:07:57 来自PC
支持学习
洛阳app技术 发表于 2015-4-22 11:20:47 来自PC
支持学习
lvguiqun 发表于 2015-4-22 13:36:48 来自PC
都可以来学习交流
1547909727 发表于 2015-4-22 13:54:04 来自PC
感恩无私的分享与奉献
small_yun 发表于 2015-8-11 13:42:44 来自PC
感谢,很有用
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表