首页 > 编程笔记

jQuery scrollTop()方法的用法

在 jQuery 中,我们可以使用 scrollTop() 方法来获取或设置元素相对于滚动条“顶边”的距离,也可以使用 scrollLeft() 方法来获取或设置元素相对于滚动条“左边”的距离。

语法:

$().scrollTop()        //获取滚动距离
$().scrollTop(n)       //设置滚动距离,n 是一个整数,表示 n 像素

在实际开发中,大多数情况下我们只会用到 scrollTop() 方法,极少用到 scrollLeft() 方法。因此对于 scrollLeft() 方法,简单了解一下即可。

举例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body{height:1800px;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $(window).scroll(function(){
                var top = $(this).scrollTop();
                console.log("滚动距离:"+ top + "px");
            });
        })
    </script>
</head>
<body>
</body>
</html>
当我们拖动滚动条时,控制台输出结果如图 1 所示。
滚动距离的效果
图 1:滚动距离的效果

分析
$(window).scroll(function () {
    ……
})
上面这段代码表示滚动事件,我们在后面还会详细介绍,这里不需要深入了解。获取滚动条的距离在各种特效(如回顶部效果)中用得非常多,我们在后续章节会慢慢介绍。

关注公众号「站长严长生」,在手机上阅读所有教程,随时随地都能学习。本公众号由站长亲自运营,长期更新,坚持原创,专注于分享创业故事+学习历程+工作记录+生活日常+编程资料。

公众号二维码
微信扫码关注公众号

优秀文章