• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jQuery点击平滑跳转到页面指定位置代码示例

jQuery 程序员 2年前 (2019-03-21) 159次浏览 已收录 0个评论

大家一定遇到过网页中可能有这样的效果,当点击网页中一个链接时候能够平滑的定位到网页的指定位置,当然使用锚点可以实现此功能,但过渡不平滑,下面通过代码实例介绍一下如何以动画方式平滑的实现此功能。

代码实例如下:

点击导航栏菜单可以实现网页内部的平滑定位效果,下面介绍一下它的实现过程。

一.代码注释:

(1).$.fn.anchorGoWhere=function(options){},为jquery对象实例添加函数,参数options会传递一个对象直接量作为参数。

(2).var obj=$(this),声明一个obj,存储jquery对象,这里的this是指向一个jquery对象,不要认为只要是this就是指向dom对象。

(3).var defaults={target:0,timer:1000},定义对象直接量,用来作为默认的一些参数,target:0表示不进行定位,timer:1000表示一秒。

(4).var o=$.extend(defaults,options),使用参数options扩展对象defaults,在本例中其实修改第一个参数target。

(5).this.each(function(i){}),遍历jquery对象中的每一个元素,这里也就是链接。

(6).$(obj).click(function(){}),为每一个链接注册click事件处理函数。

(7).var _rel=$(this).attr(“href”).substr(1),截取字符串,比如”#menu1″就被截取为”menu1″。

(8).switch(o.target){},一个switch语句。

(9).case 1,如果o.target的值是1。

(10).var _targetTop=$(“#”+_rel).offset().top,获取匹配的legend元素距离文档顶部的距离。

(11).$(“html,body”).animate({scrollTop:_targetTop},o.timer),使用动画方式设置滚动条的垂直偏移量,值是_targetTop,这样就会平滑的定位到匹配元素位置。

(12).return false,取消链接的默认动作,这里的作用就是取消锚点定位效果。


喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址