jquery 锚点链接平滑跳转实现回到顶部

发布时间:2019-12-13编辑:脚本学堂
怎么用jquery实现锚链接的平滑切换跳转,以实现回到顶部的效果,jquery返回顶部的实现代码,需要的朋友参考下。

jquery锚链接实现平滑跳转效果

1、方法调用:
 

复制代码 代码示例:
$(document).ready(function(){
$(".gotop").anchorgowhere({target:1});
$(".godown").anchorgowhere({target:1});
$(".gonext").anchorgowhere({target:1});
$(".gofront").anchorgowhere({target:1});
$(".govertical").anchorgowhere({target:2});
});
 

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

2、锚点起点部分:
 

复制代码 代码示例:
<a href="#menu1" class="godown">菜单一</a>
<a href="#menu2" class="gonext">懒人们,点这里看第二章节</a>
<a href="#menu1" class="gofront">怎么了,前面一章忘记了?</a>
<a href="#right" class="govertical">还没看过瘾,我带你到右边去看看-&gt;</a>
<a href="#body" class="gotop">返回顶部</a></span>

3、锚点目的地:
<legend id="menu1">菜单一的内容</legend>
<body id="body">
当页面js失效后,这些锚点还是可以按默认的方式跳转。符合了预留退路的js编程原则。

4、程序代码:
 

复制代码 代码示例:
jquery.fn.anchorgowhere = function(options){
var obj = jquery(this);
var defaults = {target:0, timer:1000};
var o = jquery.extend(defaults,options);
obj.each(function(i){
jquery(obj[i]).click(function(){
var _rel = jquery(this).attr("href").substr(1);
switch(o.target){
case 1:
 var _targettop = jquery("#"+_rel).offset().top;
 jquery("html,body").animate({scrolltop:_targettop},o.timer);
 break;
 case 2:
 var _targetleft = jquery("#"+_rel).offset().left;
 jquery("html,body").animate({scrollleft:_targetleft},o.timer);
 break;
 }
 return false;
 });
});
};