关于html页面添加锚点动画的原理

原始的添加锚点不做处理的话会很生硬的跳到锚点处，给用户带来的体验度很差，这时就需要添加一些动画做一下过度。好了，回到正题：

首先看代码：

    HTML:

<div><a id="hs_myid" href="#a1"></a></div>
<div>
 <p class="hs"></p>
  ...
 <p id="a1" class="hs"></p>
 <p class="hs"></p>
</div>

JS:

$(function () {
   $('#hs_myid').click(function(){
      var hs_hight = $($(this).attr("href")).offset().top;
        $("html, body").animate({
            scrollTop: hs_hight + "px"
        }, 1500);
        return false;
    });
});

添加锚点动画的重点在于找到锚点处在文档处的位置 :$($(this).attr("href")).offset().top

然后通过animate的动画移动到hs_hight 处。