版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cc18868876837/article/details/83998638
经常有这样的需求：有一个类似目录的导航块，点击里面的标题页面会滚动到对应的内容处。
这里提三种实现的方法：
- 通过scrollIntoView方法实现：这是自带的方法，可以通过以下方式实现调用
document.getElementById('#ID').scrollIntoView(object)，其中scrollIntoView()方法接收一个对象作为参数，该对象有3个属性：①behavior（可选），用于定义跳转的动画， 取值可为"auto", “instant” 或 “smooth” ，默认为 “auto”。②block（可选），取值为"start", “center”, “end”, 或 “nearest”。默认为 “center”。③inline（可选），取值为"start", “center”, “end”, 或 “nearest”。默认为 “nearest”。具体可参考：Element.scrollIntoView()
这个方法有一个缺点：不能控制跳转块的偏移量。因为滚动时内容的顶端是以浏览器可视区域的顶端作为基准，当导航块是固定在顶端的时候，内容会被遮住。 - 通过设置scrollTop的值来实现：一般情况下设置
document.documentElement.scrollTop = document.getElementById('#ID').offsetTop，也就是获取对应需要跳转的元素顶部离整个文档顶部的距离，然后再将其设置为滚动条滚动的距离即可。对于导航块固定在浏览器顶部的情况，将上面的方法调整一下即可document.documentElement.scrollTop = document.getElementById('#ID').offsetTop - document.getElementById('#nav').clientHeight，也就是滚动的距离减少固定块的高度即可。这种方法较为灵活，可以任意控制滚动条的滚动距离，但是它的滚动时瞬移的，也就是一下子跳到对应的位置，没有一个滚动的动画效果过渡。 - 通过scroll-to-element组件来实现：安装该组件，然后通过
const scrollIntoElement = require('scroll-to-element')引入，再通过scrollIntoElement('#ID')即可实现跳转。同理，对于导航栏固定在顶部的情况，只要设置负的偏移量（值为固定的单行栏高度）即可：scrollIntoElement('#ID', { offset: -document.getElementById('#nav').clientHeight })，该组件使用简单方便，可以控制偏移量也具有不同的滚动动画效果，该组件的原理跟方法2类似，同样是通过计算元素在文档中的位置来实现跳转。具体可参考：scroll-to-element。