jquery锚链接滑动效果
1，jquery代码
复制代码 代码示例:
$(function(){
$("ullia").click(function(){
varhr=$(this).attr("href");
varanh=$(hr).offset().top;
$("html,body").stop().animate({scrollTop:anh},2000);
})
})
2、css样式部分
复制代码 代码示例:
ul{
position:fixed;
top:0;
background:#999999;
}
ul li{
float:left;
margin:10px;
padding:10px;}
3，html部分
复制代码 代码示例:
<ul>
<li><ahref="#us">111111</a></li>
<li><ahref="#about">22222</a></li>
<li><ahref="#prouct">33333</a></li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
</ul>
<divstyle="clear:both;"></div>
<divid="us"style="height:820px;background:#6699CC;width:100%;"></div>
<divid="about"style="height:820px;background:#0066CC;width:100%;"></div>
<divid="prouct"style="height:820px;background:#003366;width:100%;"></div>
说明：
同一个页面中做锚链接，可以点击元素，让页面跳到指定位置。
不是默认的瞬间跳到指定位置，而是滑动，提升了用户体验。
思路：
1、获取到需要跳到页面中的元素，相对于页面顶部的距离$(hr).offset().top;
2、将这个值给html或body元素，让其滚动条，执行一个animate动画。这个动画，是改变浏览器滚动条相对顶部的值。
注意：
1、$(this).attr("href");这返回期，正好可以做为jquery的选择器。
2、.stop()防止不停点击，会不停产生动画列队的bug。
