$(window).scrollTop() vs. $(document).scrollTop()

在前端开发中，经常需要获取页面的滚动位置。常见的方法是使用 $(window).scrollTop() 或者 $(document).scrollTop()。这两个方法都可以返回页面的垂直滚动位置，但是它们有着不同的用法和特点。

$(window).scrollTop()

$(window).scrollTop() 方法返回的是当前可见窗口的垂直滚动位置。也就是说，如果页面的高度大于窗口的高度，那么 $(window).scrollTop() 就是窗口顶部和页面顶部之间的距离。

示例代码：

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  console.log(scrollTop);
});

在上面的代码中，我们监听了窗口的滚动事件，并且通过 $(this).scrollTop() 获取了当前窗口的滚动位置。

$(document).scrollTop()

$(document).scrollTop() 方法返回的是整个文档的垂直滚动位置。也就是说，无论窗口的高度是多少，$(document).scrollTop() 都是页面顶部和文档顶部之间的距离。

示例代码：

$(window).scroll(function() {
  var scrollTop = $(document).scrollTop();
  console.log(scrollTop);
});

在上面的代码中，我们监听了窗口的滚动事件，并且通过 $(document).scrollTop() 获取了整个文档的滚动位置。

区别和应用

在实际开发中，我们需要根据实际情况来选择使用哪个方法。

如果我们要实现一些效果，比如当页面滚动到某个位置时出现一个固定的导航栏或者回到顶部按钮，那么我们应该使用 $(window).scrollTop() 方法。因为这些效果只需要在窗口可见区域内展示，而不需要考虑整个文档的高度。

示例代码：

-- -------------------- ---- -------
--------------------------- -
  --- --------- - --------------------
  -- ---------- - ---- -
    ----------------------------
    -------------------------
  - ---- -
    -------------------------------
    -------------------------
  -
---

在上面的代码中，当页面滚动超过 100px 时，我们添加了 .fixed 类使得导航栏固定在页面顶部，并显示了回到顶部按钮。

如果我们需要实现一些需要获取整个文档高度、计算百分比等操作的效果，比如滚动进度条或者瀑布流加载更多数据，那么我们应该使用 $(document).scrollTop() 方法。因为这些效果需要考虑整个文档的高度。

示例代码：

var scrollTop = $(document).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;

console.log(scrollPercent);

在上面的代码中，我们计算了当前页面的滚动进度百分比，并打印在控制台中。

总结

• $(window).scrollTop() 返回窗口可见区域的垂直滚动位置。
• $(document).scrollTop() 返回整个文档的垂直滚动位置。
• 在实际开发中，应该根据需求选择使用哪个方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9620