jQuery实现页面内锚点平滑跳转特效的方法总结
平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且url链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款jquery做的滚动的特效，既可以设置滚动速度，又可以在url链接上没有“小尾巴”。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>jQuery实现页面内锚点平滑跳转</title><basetarget="_blank"/>
<styletype="text/css">
#hovertree{
height:800px;
background:red;
text-align:center;color:white;
}
#keleyi{
height:800px;
background:green;text-align:center;color:white;
}
#myslider{
height:800px;
background:black;text-align:center;color:white;
}
#zonemenu{
height:800px;
background:yellow;text-align:center;
}
.keleyilink{position:fixed;}
.keleyilinka{text-decoration:none;}
</style>
</head>
<body>
<divclass="keleyilink">
<ahref="javascript:scroll('hovertree');"target="_self">HoverTree</a>
<ahref="javascript:scroll('keleyi');"target="_self">KKK</a>
<ahref="javascript:scroll('myslider');"target="_self">myslider</a>
<ahref="javascript:scroll('zonemenu');"target="_self">ZoneMenu</a>
</div>
<divid="hovertree">hovertree
<br/><br/><br/><ahref="">原文</a><ahref="">JJJ</a><ahref="http://hovertree.com">HoverTree</a><ahref="/">特效库</a>
</div>
<divid="keleyi">jb51</div>
<divid="myslider">myslider</div>
<divid="zonemenu">zonemenu</div>
<scriptsrc="jquery/jquery-1.11.3.min.js"></script>
<scriptsrc="jquery.hovertreescroll.js"></script>
<script>
functionscroll(id){
$("#"+id).HoverTreeScroll(1000);
}
</script>
</body>
</html>
更简单点的实现方法：
代码只有一句话
$("html,body").animate({scrollTop:$("#elementid").offset().top},1000);
animate()方法用来实现一组css的自定义动画，有两种调用方法
第一种形式接受4个参数，如下所示
.animate(properties[,duration][,easing][,complete])
properties–一个包含样式属性及值的映射
duration–可选的速度参数，既可以是预置的字符串，也可以是一个毫秒数值
easing–可选的缓动类型，jquery默认的只有两种：swing和linear,要使用其它效果需要安装缓动类的插件
complete–可选的回调函数，在动画结束时被调用
第一种形式的示例如下
.animate({property1:'value1',property2:'value2'},
speed,easing,function(){
alert('Theanimationisfinished.');
});
本文实现锚点跳转的代码使用了第一种形式
$("html,body")代表对html或body元素进行动画，即要改变他们的css属性值
scrollTop是要改变的属性值，表示滚动条滑过的距离，在这里表示向下拉动浏览器滚动条后html（body)被浏览器顶端隐藏的高度
$("#elementid").offset().top就是html（body)需要被浏览器顶端隐藏的高度，它代表id为elementid的元素顶端到网页顶端（不是浏览器可视区域顶端）的绝对距离。
1000是指动画时间为1秒
animate()方法还有第二种调用形式
.animate(properties,options)
一个是属性映射，一个是选项映射。实际上这里的第二个参数是把第一种形式的第2-4个参数封装在另一个映射中，同时又添加了两个选项。第二种形式的代码如下：
.animate({
property1:'value1',
property2:'value2'
},{
duration:'value',
easing:'value',
complete:function(){
alert('Theanimationisfinished.');
},
queue:boolen,
step:callback
});
以上所述就是本文的全部内容了，希望大家能够喜欢。