编辑文章

描述:

封面图上传：

点击上传图片

最近在优化自己的网站，需要对吧网站上一些标题啥的可以直接快速跳过去，于是就研究了一下js的scrollTo相关函数，具体如下：
#### 一、直接通过scrollIntoView跳转到对应的元素位置
这个存在一个问题，比如我有固定的导航栏，同时用的是**position: fixed**来定位，使用这个方法就存在问题，可能div被遮挡。于是就可以考虑**window.scrollTo**
```js
  document.getElementById('scroll').scrollIntoView({
            block: 'start',
            inline: 'nearest',
            behavior: 'smooth'
        })
```
#### 二、通过window.scrollTo跳转到对应的元素位置，支持设置偏移量
这个方法避免**scrollIntoView**导致的遮挡，但是存在一个很严重的问题，如果你目前整个页面是在最顶部，没有向下滑动，那么没有问题，这个方法OK。如果你手动向下滚动了，那么对不起，它定位开始不准了，就很尴尬。
```js
var element = document.getElementById(anchorId);
var headerOffset = 70;//顶部需要空70px，即我的导航栏高度
var elementPosition = element.getBoundingClientRect().top;
console.log(element.getBoundingClientRect().top)
var offsetPosition = elementPosition - headerOffset;
window.scrollTo({
          top: offsetPosition,
        behavior: "smooth"
});
```
#### 三、通过document.documentElement.scrollTop跳转到对应的元素位置，支持设置偏移量,同时避免了window.scrollTo导致的定位不准的问题
这个方法是找了很多帖子，有人遇到同样的问题，有大佬解决了。
原贴地址：[
Javascript scrollintoview smooth scroll and offset](https://www.e-learn.cn/topic/2371753)
```js
var element = document.getElementById(anchorId);
var headerOffset = 70;
ar elementPosition = element.offsetTop;
var offsetPosition = elementPosition - headerOffset;
document.documentElement.scrollTop = offsetPosition;
document.body.scrollTop = offsetPosition; // For Safari
```