滚动到不使用JQuery的元素

Question

我正在尝试滚动页面，以便可以看到登录屏幕外部区域中的特定输入。 像这样的东西：

document.getElementById('my-input').scrollTo(); 

我在SO中看到的所有示例都使用JQuery，但是我想使用纯JS ...我该怎么办？

谢谢 ！

Answer 1

您可以使用非标准化（但受支持的） scrollIntoView()方法：

 document.getElementById('bar').scrollIntoView(); 

 .foo { height: 5000px; background: red; } #bar { height: 1000px; background: yellow; } 

 <div class="foo"></div> <div id="bar"></div> 

或者，您可以使用scrollTo() ，将元素的顶部作为y坐标。

 window.scrollTo(0, document.getElementById('bar').getBoundingClientRect().top); 

 .foo { height: 5000px; background: red; } #bar { height: 1000px; background: yellow; } 

 <div class="foo"></div> <div id="bar"></div> 

Answer 2

如果可以单方式帮助您，则可以使用anchors滚动到特定ID 。

---

 div { height: 200px; margin-bottom: 300px; border: 1px solid; } 

 <a href="#b">Press Me</a> <br><br> <div id="a"> A </div> <div id="b"> B </div> <div id="c"> C </div> <div id="d"> D </div>