JS获取滚动条距离顶部的距离|极客笔记

JS获取滚动条距离顶部的距离

在网页开发中，经常会遇到需要获取滚动条距离顶部的距离的需求。比如实现滚动到一定距离时显示返回顶部按钮，或者实现滚动时导航栏变化等效果。本文将详细讲解如何使用JavaScript来获取滚动条距离顶部的距离，并给出一些实际应用的示例。

获取滚动条的距离

要获取滚动条距离顶部的距离，我们需要通过JavaScript来操作。通常情况下，我们可以通过window对象的scrollY属性来获取滚动条距禃顶部的距离。代码如下：

const scrollTop = window.scrollY;
console.log(scrollTop);

以上代码会将滚动条距离顶部的距离打印到控制台上。当页面滚动时，这个值会实时变化。

实际应用示例

滚动到一定距离显示返回顶部按钮

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll to Top Button</title>
<style>
  #scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
  }
</style>
</head>
<body>
<button id="scrollToTop">Top</button>
<script>
  const scrollToTopBtn = document.getElementById("scrollToTop");

  window.addEventListener("scroll", () => {
    if (window.scrollY > 300) {
      scrollToTopBtn.style.display = "block";
    } else {
      scrollToTopBtn.style.display = "none";
    }
  });

  scrollToTopBtn.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  });
</script>
</body>
</html>

上面的示例代码实现了滚动到一定距离时显示返回顶部按钮的效果。当页面滚动距离超过300px时，返回顶部按钮会显示，点击按钮可以平滑滚动到页面顶部。