scroll

- - 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',});},

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