美文网首页
利用jQuery实现页面下滑

利用jQuery实现页面下滑

作者: 大黑不小白 | 来源:发表于2017-04-05 15:24 被阅读0次

不少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);
    })
})

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

相关文章

网友评论

      本文标题:利用jQuery实现页面下滑

      本文链接:https://www.haomeiwen.com/subject/bttxattx.html