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

  • 内容
  • 评论
  • 相关

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

代码实例如下:

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

一.代码注释:

(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,取消链接的默认动作,这里的作用就是取消锚点定位效果。

原创文章,转载请注明: 转载自搞代码

本文链接地址: jQuery点击平滑跳转到页面指定位置代码示例

微信支付二维码

微信 赏一包辣条吧~

支付宝支付二维码

支付宝 赏一听可乐吧~

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注