首页 > 编程笔记 > JavaScript笔记 > jQuery DOM操作

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 () {
    ……
})
上面这段代码表示滚动事件，我们在后面还会详细介绍，这里不需要深入了解。获取滚动条的距离在各种特效（如回顶部效果）中用得非常多，我们在后续章节会慢慢介绍。

所有教程

优秀文章