业务场景:在写Webapp的过程中遇到了一个这样的问题,有一个表单提交需要走数据校验,必填选项没有填的需要定位到对应的地方去
看到这个需求的时候第一个想到的就是用锚点,把表单控件上定义一个ID就直接跳过去了,这样做完后才发现有一个问题
使用锚点跳转会记录浏览器的history,当点击浏览器的返回键或者使用 go(-1) 返回上一个页面的的时候返回的是上一个锚点
而不是返回到对应的页面去。
解决办法:scrollIntoView()
scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。
详细可见MDN介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
setScrollTop (id) { this.$nextTick(() => { document.querySelector(`#${id}`).scrollIntoView() }) }
最后使用scrollIntoView() 后点击浏览器后退与go(-1)就正常了