如何使用JavaScript滚动到一个元素?

我试图将页面移动到<div>元素。

我已经尝试了下一个代码无效:

document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';

当前回答

scrollIntoView工作良好:

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

MDN文档中的完整引用: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

其他回答

下面是一个函数，它可以包含那些固定头的可选偏移量。不需要外部库。

function scrollIntoView(selector, offset = 0) {
  window.scroll(0, document.querySelector(selector).offsetTop - offset);
}

您可以使用JQuery获取元素的高度并滚动到它。

var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)

2018年3月更新

不使用JQuery滚动到这个答案

scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)

scrollIntoView工作良好:

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

MDN文档中的完整引用: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

最好的，最简短的回答是什么即使是动画效果也有效:

var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

如果你有一个固定的导航条，只需从顶部值中减去它的高度，所以如果你的固定导航条高度是70px，第2行将看起来像这样:

window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});

解释: 第1行获取元素位置第2行滚动到元素位置;属性添加平滑的动画效果

如果你想使用html，你可以使用这个:

a href="samplewebsite.com/subdivision.html#id

并将其作为指向特定元素id的HTML链接。它基本上是getElementById html版本。

焦点只能放在互动元素上…Div只表示页面的一个逻辑部分。

也许你可以在div周围设置边框，或者改变它的颜色来模拟焦点。是的，可见性不是焦点。

推荐文章