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

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" > 还没看过瘾，我带你到右边去看看- &gt; </ 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地址：懒人的小说