JS 滚动到正文上的 id - Javascript

在页面中有时需要跳转到某个特定的位置，比如滚动到正文上的id，通过JS实现这个效果非常简单。

步骤

1. 获取需要滚动的元素

首先需要获取需要滚动到的元素，可以使用 document.getElementById() 或document.querySelector()方法。

const element = document.getElementById('id_of_element_to_scroll_to');
// 或者
const element = document.querySelector('#id_of_element_to_scroll_to');

2. 获取元素的位置信息

获取元素的位置信息可以使用 offsetTop 属性，该属性返回该元素相对于其定位父元素的顶部距离。

const elementTop = element.offsetTop;

3. 滚动到指定位置

设置 window.scrollTo() 方法的第一个参数为0，表示滚动到文档顶部，将第二个参数设置为元素距离上边界的距离，在此示例中即为 elementTop。

window.scrollTo(0, elementTop);

示例代码

const element = document.getElementById('id_of_element_to_scroll_to');
const elementTop = element.offsetTop;
window.scrollTo(0, elementTop);

总结

使用以上步骤可以实现快速滚动到指定元素的功能，通过获取元素位置信息并调用 window.scrollTo() 方法即可实现。