利用jQuery实现页面下滑

不少jQuery小白不太明白怎么实现点击一个按钮或者链接，整个页面都向下滑动一定距离这个看起来拉风高大上的功能。 其实只需要掌握一个常见的offset和scrollTop方法就可以轻松实现了。
下面用简单的例子来演示一遍吧！

<a href="#div">点击这个链接</a>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<div id="div">点击上面的链接会移动到这个位置</div>
<p>占位</p>
<p>占位</p>
<p>占位</p>
<p>占位</p>

这样简单的把a标签的链接，直接链接到id="div"的元素上，就可以实现页面“跳转”
想要下滑的动画就需要用到强大的jQuery功能了
在以上代码基础上加入

$(function(){
    $('a').click(function(){
        var H = $("#div").offset().top;     //用变量获取元素div块的高度H
        $("body").animate({"scrollTop":H},800);
    })
})

这样就实现了页面点击下拉最基本的原理了，在此基础上做交互会让页面的体验更好~