不少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);
})
})
这样就实现了页面点击下拉最基本的原理了,在此基础上做交互会让页面的体验更好~