jQuery任意标签锚点跳转插件

// 任意锚点平滑跳转插件
// 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>
	&nbsp;
	按钮平滑到底部：<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&amp;690" />
	</div>
	<div id="bottom" class="append_box mt20 pb20">
	平滑回到顶部：<a href="#top" class="smooth">回到顶部链接</a>
	&nbsp;
	直接跳到顶部：<button id="btnTop" type="button" anchor="top">点击我吧</button>
	</div>
	</div>