// 任意锚点平滑跳转插件
// 2010-07-15 v1.0
(function($){
$.fn.zxxAnchor = function(options){
var defaults = {
ieFreshFix: true,
anchorSmooth: true,
anchortag: "anchor",
animateTime: 1000
};
var sets = $.extend({}, defaults, options || {});
//修复IE下刷新锚点失效的问题
if(sets.ieFreshFix){
var url = window.location.toString();
var id = url.split("#")[1];
if(id){
var t = $("#"+id).offset().top;
$(window).scrollTop(t);
}
}
//点击锚点跳转
$(this).each(function(){
$(this).click(function(){
var aim = $(this).attr(sets.anchortag).replace(/#/g,""); //跳转对象id
var pos = $("#"+aim).offset().top;
if(sets.anchorSmooth){
//平滑
$("html,body").animate({scrollTop: pos}, sets.animateTime);
}else{
$(window).scrollTop(pos);
}
return false;
});
});
};
})(jQuery);
参数
参数 | 默认 | 解释 |
---|---|---|
ieFreshFix | true | 布尔型,默认修复IE下刷新锚点不起作用的问题 |
anchorSmooth | true | 布尔型,默认平滑跳转 |
anchortag | anchor | 字符串,用以绑定id的标签属性,默认是"anchor",属于自定义属性 |
animateTime | 1000 | 整数,动画执行的时间,如果anchorSmooth为false,则此参数无效 |
插件使用
此插件的方法为:zxxAnchor()
。
插件插件要想使用,需要对触发锚点跳转的标签进行一些设置。在默认情况下,要给标签添加一个自定义的属性anchor
,例如:
<button id="btnTop" type="button" anchor="top">点击我吧</button>
这里的按钮就添加了一个自定义的anchor
属性,属性值是"top"
,表示的意思就是页面跳转到id
为'top'
的元素处。此时直接调用zxxAnchor方法就可以了,如下代码:
$("#btnTop").zxxAnchor();
当然,我们可以不使用默认的anchor标签,例如我们可以使用a标签的href属性,只要在绑定zxxAnchor方法时修改下参数就可以了,例如:
<a href="#bottom" class="smooth">滑到底部</a>
对于的jQuery代码如下:
$(".smooth").zxxAnchor({ anchortag: "href" });
//实例
<script type="text/javascript"> | |
$(function(){ | |
$(".smooth").zxxAnchor({ | |
anchortag: "href" | |
}); | |
$("#btnBottom").zxxAnchor(); | |
$("#btnTop").zxxAnchor({ | |
anchorSmooth: false | |
}); | |
}); | |
</script> |
<div class="demo tc"> | |
<div id="top" class="append_box mb20"> | |
平滑跳转到底部:<a href="#bottom" class="smooth">滑到底部</a> | |
| |
按钮平滑到底部:<button id="btnBottom" type="button" anchor="bottom">点击我</button> | |
</div> | |
<div id="appendBox" class="append_box"> | |
<img width="300" height="3281" src="//ss4.sinaimg.cn/bmiddle/6200b7a8t8b6743480673&690" /> | |
</div> | |
<div id="bottom" class="append_box mt20 pb20"> | |
平滑回到顶部:<a href="#top" class="smooth">回到顶部链接</a> | |
| |
直接跳到顶部:<button id="btnTop" type="button" anchor="top">点击我吧</button> | |
</div> | |
</div> |