您的位置：首页 > Web前端 > JQuery

jQuery制作的页内锚点平滑跳转

2013-01-16 14:50 141 查看

http://www.cnblogs.com/miqi2214/archive/2009/04/30/1446878.html

很久前看一欧美网站居然是个横版的，很宽很雷人

，但使用了锚点平滑跳转效果使得整个浏览体验也是很愉快的。通常国内很多大网站页面都是纵向的，很高很累人，因此也会用锚点平滑效果减轻浏览负担。综上所述，那就干脆搞个更雷人的效果，支持横版和纵版的锚点平滑跳转效果吧

看着很强大的样子哦，其实是

声大

点小。哪是为什么呢？因为用了jquery，代码就自然很简单咯。

Demo地址：懒人的小说

先看如何调用：

1 $(document).ready(function(){

2 $(".goTop").anchorGoWhere({target:1});

3 $(".goDown").anchorGoWhere({target:1});

4 $(".goNext").anchorGoWhere({target:1});

5 $(".goFront").anchorGoWhere({target:1});

6 $(".goVertical").anchorGoWhere({target:2});

7 });

$("...")部分表示通过样式名获得该类的a标签，该样式名没有具体的样式定义（也可以根据实际需要定义），只为为了便于查找同类标签而已。anchorGoWhere就是锚点跳转的实现方法，里面的target参数为跳转的类型，如果是1，则是纵向的；如果是2，则是横向的。

锚点起点部分：

1 <a href="#menu1" class="goDown">菜单一</a>

2 <a href="#menu2" class="goNext">懒人们，点这里看第二章节</a>

3 <a href="#menu1" class="goFront">怎么了，前面一章忘记了？</a>

4 <a href="#right" class="goVertical">还没看过瘾，我带你到右边去看看-></a>

5 <a href="#body" class="goTop">返回顶部</a></span>

锚点目的地：

<legend id="menu1">菜单一的内容</legend>

<body id="body">

由“锚点起点”和“锚点目的地”代码可以看到，一切代码都是很常规的页内锚点设置。我们没有因为扩张平滑效果而强加一些多余的配置代码，同时当页面js失效后，这些锚点还是可以按默认的方式跳转。这或多或少还是符合了预留退路的js编程原则。

最后看看完整的程序代码：

1 jQuery.fn.anchorGoWhere = function(options){

2 var obj = jQuery(this);

3 var defaults = {target:0, timer:1000};

4 var o = jQuery.extend(defaults,options);

5 obj.each(function(i){

6 jQuery(obj[i]).click(function(){

7 var _rel = jQuery(this).attr("href").substr(1);

8 switch(o.target){

9 case 1:

10 var _targetTop = jQuery("#"+_rel).offset().top;

11 jQuery("html,body").animate({scrollTop:_targetTop},o.timer);

12 break;

13 case 2:

14 var _targetLeft = jQuery("#"+_rel).offset().left;

15 jQuery("html,body").animate({scrollLeft:_targetLeft},o.timer);

16 break;

17 }

18 return false;

19 });

20 });

21 };

是不是很简单啊？其实类似这种锚点平滑跳转的代码，网上一搜就有很多。但要用得顺手还是自己根据实际需要写的方便，何况这个也不难。这个Demo在firefox3、Opera9、IE6/7/8、safari4下测试通过，经朋友测试chrome不行，但我一时也没看出个究竟。如果哪位朋友知道原因，麻烦告诉我。

Demo地址：懒人的小说

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航