在 JavaScript 中滚动到特定元素

Kushank Singh 2023年1月30日 2021年10月2日
  1. JavaScript 中使用 scroll() 函数滚动到特定元素
  2. JavaScript 中使用 href 属性滚动到到特定元素
  3. JavaScript 中使用 scrollIntoView() 函数滚动到特定元素
在 JavaScript 中滚动到特定元素

我们将讨论如何使用 JavaScript 在不同浏览器中获取浏览器窗口可见区域中的指定元素。

完成此任务的方法如下。

JavaScript 中使用 scroll() 函数滚动到特定元素

元素界面的 scroll() 函数滚动到给定元素内的一组特定坐标。这适用于 Chrome 和 Firefox 而不适用于其他。

window.scroll(0,findPos(document.getElementById("myDiv")));

我们使用 getElementById() 方法获取所需的元素。我们在 scroll() 函数中传递它以滚动到所需的元素。

JavaScript 中使用 href 属性滚动到到特定元素

在这里,我们可以在 JavaScript 中将 href 值设置为指向网页中的锚点。

location.href = "#";
location.href = "#myDiv";

这里 #myDiv 是所需 <div> 标签的 ID。

JavaScript 中使用 scrollIntoView() 函数滚动到特定元素

scrollIntoView() 函数将提供的元素移动到浏览器窗口的可视区域。这最适合 IE、Safari 和 Edge 用户。

例如,

document.querySelector('#myDiv').scrollIntoView({
  behavior: 'smooth'
});

behavior 属性描述了滚动的外观。在我们的示例中,它设置为平滑。这个属性也可以用在 scroll() 函数中。