我正在尝试将页面移动到一个<div>元素。
我试过下一个代码无济于事：
document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';
如何使用 JavaScript 滚动到元素？
IT技术
javascript
html
2021-02-07 21:50:46
6个回答
scrollIntoView 效果很好：
document.getElementById("divFirst").scrollIntoView();
MDN 文档中的完整参考：https :
//developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
您可以使用锚点来“聚焦” div。IE：
<div id="myDiv"></div>
然后使用以下 javascript：
// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";
你的问题和答案看起来不同。我不知道我是否弄错了，但对于那些用谷歌搜索并到达这里的人，我的答案如下：
我的回答解释了：
这是一个简单的javascript
当您需要将屏幕滚动到具有 id="yourSpecificElementId" 的元素时调用此方法
window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));
IE。对于上述问题，如果目的是将屏幕滚动到 id 为 'divFirst' 的 div
代码将是： window.scroll(0,findPos(document.getElementById("divFirst")));
你需要这个功能来工作：
//Finds y value of given object
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curtop];
}
}
屏幕将滚动到您的特定元素。
适用于 Chrome 和 Firefox
我一直在研究这个，我想出了这个，不知何故感觉像是最自然的方法。当然，这是我现在个人最喜欢的卷轴。:)
const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
top: y,
behavior: 'smooth'
});
对于 IE、Edge 和 Safari 支持者
请注意，window.scroll({ ...options })IE、Edge 和 Safari 不支持。在这种情况下，最有可能使用
element.scrollIntoView(). （支持 IE 6）。您很可能（阅读：未经测试）传递选项而没有任何副作用。
这些当然可以包装在一个函数中，该函数根据所使用的浏览器来表现。
最好，最短的答案，即使使用动画效果也能正常工作：
var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});
如果你有一个固定的导航栏，只需从顶部值减去它的高度，所以如果你的固定栏高度是 70px，第 2 行看起来像：
window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});
说明：
第1行获取元素位置第2行滚动到元素位置；behavior属性添加了平滑的动画效果