关于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 处。

阅读更多