scroll-behavior: smooth；

scroll-behavior - CSS（层叠样式表） | MDN

需求：表单填写页面，当点击提交时，校验表单必填项，并希望页面滚动到一个有错误信息提示的地方：

         // 若有校验失败则页面回到第一个错误提示位置
            
         this.$nextTick(() => {
              document
                .getElementsByClassName('el-form-item__error')[0]
                .setAttribute('id', 'first_error');
              let objEle = document.getElementById('first_error');
              let scrollHeight = this.findPosY(objEle);
              scrollHeight[0] = scrollHeight[0] - 300;

            // 计算出滚动条需要滚动的距离
              window.scrollTo({
                top: scrollHeight,
                behavior: 'smooth',
              });
          });



        // 获取元素到达顶部的距离

        findPosY(obj) {
            //obj为所要计算的元素,可用id或class获取
            var top = 0;
            if (obj.offsetParent) {
              do {
                top += obj.offsetTop;
              } while ((obj = obj.offsetParent));
              return [top];
            }
         },

点击表单之后，展示结果页，在测试环境中由于页面的头和尾都是异步加载上去的，所以当页面渲染完成后，浏览器的滚动条会在最下面，这时需要进入页面滚动条平滑的滚动到最顶部。

// 由于好几种写法都没有生效，所以采用监听页面的一个属性noTimes，
// 这个noTimes属性是判断用户是否有提交次数了，3次是为上限，当没有次数提示用户：您当前的次数已用完。
// 这一句话的时候，滚动条是正常的。只有提交成功需要把滚动条滚到页面的顶部
watch: {
      async noTimes() {
        await this.$nextTick();
        setTimeout(() => {
          window.scrollTo({
            top: 0,
            behavior: 'smooth',
          });
        }, 0);
      },
    },

现在说一下代码为什么要这么写：

当时尝试以下写法都不行：

1.写法一

mounted: {
      this.$nextTick(()=> {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
          });
      );
       
},

2.写法二

mounted: {
      setTimeout(()=> {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
          });
      },100);
       
},

3.写法三 

async mounted: {
        await this.$nextTick();
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
          });
       
},

 官方文档也有类似的例子：