如何使用 JavaScript 滚动到某个元素？

如何使用JavaScript滚动到某个元素？

您可以使用scrollIntoView()方法滚动到网页上的特定元素。所有主流浏览器都支持此方法。

要使用scrollIntoView()方法，只需将要滚动到的元素作为参数传递给该方法即可。例如，以下代码滚动到 ID 为“divFirst”的元素：

document.getElementById("divFirst").scrollIntoView();

scrollIntoView() 方法可以采用可选的第二个参数，该参数指定如何将元素滚动到视图中。接受以下值：

• “auto”：元素将尽可能滚动到视图中，而不将页面滚动离开其当前位置。
• “smooth”：元素将平滑地滚动到视图中，并带有动画效果。
• “if-needed”：元素仅在尚不可见时才会滚动到视图中。

例如，以下代码平滑地滚动到 ID 为“divFirst”的元素：

document.getElementById("divFirst").scrollIntoView({behavior: "smooth"});

您还可以使用scrollIntoView() 方法滚动到元素内的特定偏移量。为此，请将具有以下属性的对象作为该方法的第二个参数传递：

• “block”：距元素顶部的偏移量（以像素为单位）。
• "inline": 距元素左侧的偏移量，以像素为单位。

例如，以下代码滚动到 ID 为“divFirst”的元素，并从顶部偏移 100 像素距左侧 50 像素：

document.getElementById("divFirst").scrollIntoView({block: 100, inline: 50});

以上是如何使用 JavaScript 滚动到某个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！