jQuery-锚链接滑动效果

$(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/

转载于:https://www.cnblogs.com/lufy/archive/2012/05/15/2501153.html