设置滚动条位置

当网页内容超过浏览器窗口高度时，就需要使用滚动条来查看隐藏的内容。在某些情况下，我们可能需要自动设置滚动条的位置，例如在加载新数据或跳转到锚点位置时。

获取和设置滚动条位置

要获取当前滚动条位置，我们可以使用 scrollY 或 pageYOffset 属性（取决于浏览器的兼容性）。这些属性返回文档从顶部滚动的像素数。

const currentScrollPos = window.scrollY || window.pageYOffset;

要设置滚动条位置，我们可以使用 scrollTo() 方法。该方法接受两个参数：水平和垂直滚动条位置（以像素为单位）。

// 将滚动条位置设置为 x=0, y=500 像素
window.scrollTo(0, 500);

平滑滚动

在某些情况下，我们希望滚动条平滑地滚动到指定位置，而不是瞬间跳转。要实现此效果，可以使用 scroll() 方法。该方法接受两个参数：目标滚动位置和选项对象。

// 将滚动条平滑滚动到 x=0, y=500 像素的位置，持续 500 毫秒
window.scroll({
  top: 500,
  behavior: 'smooth'
});

示例：自动滚动到顶部

以下示例演示了如何在用户滚动一定距离后自动将页面滚动到顶部。

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

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

总结

通过使用 scrollY 或 pageYOffset 属性和 scrollTo() 或 scroll() 方法，我们可以轻松地获取和设置滚动条位置。如果需要平滑滚动，请使用 scroll() 方法，并将选项对象的 behavior 属性设置为 'smooth'。

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