在 jQuery 中，我们可以使用 scrollTop() 方法来获取或设置元素相对于滚动条“顶边”的距离，也可以使用 scrollLeft() 方法来获取或设置元素相对于滚动条“左边”的距离。
图 1：滚动距离的效果
语法：
$().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 () {
……
})
上面这段代码表示滚动事件，我们在后面还会详细介绍，这里不需要深入了解。获取滚动条的距离在各种特效（如回顶部效果）中用得非常多，我们在后续章节会慢慢介绍。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23814.html