jQuery scrollTop()方法的用法

时间：03-07来源：作者：点击数：

在 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 () {
    ……
})

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

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:jQuery html()方法的用法下一篇:jQuery offset()和position()方法

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有