javascript - 滚动到页面上的元素,无需 jquery (Vanilla Javascript)

标签 javascript html

我知道有很多类似的问题,但是!它们似乎都是 2010 - 2013 年的,并且需要使用我想避免的 jQuery。

有没有一种简单的方法使用 Javascript 滚动到具有特定 id 的元素并控制它的着陆位置?

我尝试使用 scrollIntoView() 但无法让它到达我想要的位置。即使有额外的配置详细here.有没有更精确的方法?

我已经尝试过

document.getElementById('6QWsZnqyuAKke20CgG4WIQ')
  .scrollIntoView({'every different config option'});

通常会发生的情况是它会滚动到很远或不够,永远不会精确到我想要的位置。我还检查了浏览器兼容性,选项在某些浏览器中不可用。有没有更精确的方法?

谢谢

最佳答案

el = document.getElementById('your-el-id');
var rect = el.getBoundingClientRect();
window.scrollTo(rect.x, rect.y)

此代码会将元素定位在窗口顶部。只需修改 window.scrollTo() 中的值即可获得所需的位置。

关于javascript - 滚动到页面上的元素,无需 jquery (Vanilla Javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49165206/

相关文章:

javascript - 当用户在不同字段中输入文本时显示 div 元素

javascript - 如何在新选项卡中打开新页面并重定向当前页面

css - 如何使带有 Rails 链接的 Div 可点击?

html - CSS 将属性设置为元素而不是后代

javascript - 如何将js小部件添加到 Shiny 的仪表板

javascript - HTML5 视频 Uncaught TypeError : . play is not a function

javascript - 比较 Vanilla JS 中包含对象的两个数组

javascript - 如何在 JavaScript 中替换 URL 中的空格?

javascript - 通过弹出窗口中的 .load 加载页面

css - 不调整 UL 和 DIV 容器的高度