在Vue 单页面中做锚点定位

公司项目中，有个保存表单的页面有很多必填字段校验。而现在增加需求，点击保存的时候，自动跳转到必填的地方。撸起袖子干起来

• 将要跳转的HTML页面 加个ref

• 跳转目标点方法

handleSave(formName) {
    this.$refs[formName].validate(valid => {
          if (valid) {
           //dosomething
          } else {
            //校验不通过跳转到目标
            let anchor = this.$refs.trId;
            this.$nextTick(() => {
             document.body.scrollTop=anchor.offsetTop
            });
            return false;
          }
        });
      }
}

运行预览， wtf，居然没效果。什么情况
很遗憾，打印出高度为0！！！！
很奇怪的问题。
最后一番折腾。监听高度啥的依然没效果。百度之，网上给出的所有解决方案都是一样的... 都是所DOCTYPE 是否指定类型了。
来去判断使用
document.body还是document.documentElement

以上方案不行，我就滚动当前的容器，chrome elements找到当前滚动的容器,重新撸如下：

 let anchor = this.$refs.trId.offsetTop;
 this.$nextTick(() => {
    document.querySelector(".scroll-container").scrollTop = anchor;
 });

重新运行预览，终于可以了！

重新整理: 

页面有很多个必填项，如何处理呢?

this.$refs[formName].validate((valid, dom) => {
          if (valid) {
            //do
          } else {
            for (let key of Object.keys(dom)) {
              //获取ref dom 点进行锚点定位
              let anchor = this.$refs[key].offsetTop;
              this.$nextTick(() => {
                document.querySelector(".scroll-container").scrollTop = anchor;
              });
              break;
            }
            return false;
          }
        });

页面只需要ref的值与必填字段一致即可