利用jQuery实现页面下滑

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

点击这个链接

占位

占位

占位

占位

占位

占位

占位

点击上面的链接会移动到这个位置

占位

占位

占位

占位

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

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

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

你可能感兴趣的:(利用jQuery实现页面下滑)