$(function(){ $("ul li a").click(function(){ var hr = $(this).attr("href"); var anh = $(hr).offset().top; $("html,body").stop().animate({scrollTop:anh},2000); }) })
ul{
position:fixed;
top:0;
background:#999999;
}
ul li{
float:left;
margin:10px;
padding:10px;}
<ul> <li><a href="#us">111111</a></li> <li><a href="#about">22222</a></li> <li><a href="#prouct">33333</a></li> <li>44444</li> <li>55555</li> <li>66666</li> </ul> <div style="clear:both;"></div> <div id="us" style="height:820px; background:#6699CC; width:100%;"></div> <div id="about" style="height:820px; background:#0066CC; width:100%;"></div> <div id="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.
参看网站:http://doubleleft.com/