我有一个页面，其中一个滚动条包含从数据库动态生成的带有div的表行。每个表行就像一个链接，有点像你在视频播放器旁边看到的YouTube播放列表。
当用户访问页面时，他们所在的选项应该会转到滚动div的顶部。这个功能正在工作。问题是，这有点太过分了。比如他们的选项高了10像素。因此，页面被访问，url被用来识别选择了哪个选项，然后将该选项滚动到滚动div的顶部。注意:这不是窗口的滚动条，这是一个带有滚动条的div。
我正在使用这段代码，使它移动选中的选项到div的顶部:
var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.scrollIntoView(true);
它将它移动到div的顶部，但大约10个像素太高了。 有人知道怎么解决吗?
当前回答
平滑滚动到适当的位置
这是大多数情况下更好的答案。它使用滚动边距和滚动填充CSS规则。 下面的解决方案使用getBoundingClientRect，它会触发一个额外的强制布局。
得到正确的y坐标并使用window。scrollTo({top: y，行为:'平滑'})
const id = 'profilePhoto';
const yOffset = -10;
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
其他回答
2022纯js，平滑滚动，也适用于重新加载的内容
这是我对现代浏览器的解决方案:
document.addEventListener("click", e => {
let anchorlink = e.target.closest('a[href^="#"]');
if (anchorlink) {
e.preventDefault();
let hashval = anchorlink.getAttribute('href')
let target = document.querySelector(hashval)
const yOffset = -75;
const y = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({ top: y, behavior: 'smooth' });
history.pushState(null, null, hashval)
e.preventDefault();
}
})
click-eventlistener监听文档，因此您不必担心运行时加载或创建的实习链接(例如在wordpress中使用gutenberg)
希望能有所帮助;)
另一个解决方案是使用"offsetTop"，就像这样:
var elementPosition = document.getElementById('id').offsetTop;
window.scrollTo({
top: elementPosition - 10, //add your necessary value
behavior: "smooth" //Smooth transition to roll
});
用绝对法定位锚
另一种方法是将锚定位在页面上想要的位置，而不是依赖于按偏移量滚动。我发现它可以更好地控制每个元素(例如。如果你想对某些元素有不同的偏移量)，并且可能对浏览器API的变化/差异更有抵抗力。
<div id="title-element" style="position: relative;">
<div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>
现在相对于元素的偏移量被指定为-100px。创建一个函数来创建这个锚，以便代码重用，或者如果你正在使用一个现代的JS框架，比如React，通过创建一个渲染锚的组件来实现，并传入锚的名称和每个元素的对齐方式，这些元素可能相同，也可能不相同。
然后使用:
const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
平滑滚动，偏移量为100px。
你可以分两步完成:
el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here
我用，
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
这使得元素在滚动后出现在中心，所以我不需要计算yOffset。
希望能有所帮助……
