实现锚点的带动画效果(不是突然跳转)

html代码

<a href="#yourid" id="myid">这里的id是你的id属性的名字</a>
<p>这里p的高度必须大于你浏览器的可视宽度才能使用锚点<p>
<a>必须是a便签的时候才能使用name属性来进行锚链接
这种是在HTML5之后改变的
</a>
<div id="yourid">content</div>

JQ实现动画效果

$(function(){
   $("#myid").click(function(){
       if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
           var $target = $(this.hash);
           $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
           if ($target.length) {
               var targetOffset = $target.offset().top;
           $('html,body').animate({scrollTop: targetOffset},800);
           return false;
           }
       }
   });
});