vue实战之让界面滚动到顶部

image.png

新增一个tab时界面滚动到头部

• 研究过window.scrollTo(0, 0) 无效
• 研究过定义锚点用a标签跳转，出现了改变路由的情况，pass

最终方案使用 scrollIntoView()

• 第一步：在你头部找一个标签命名一个id，类似一个锚点，我在卡片自定义标题上定义的。

<div slot="header" class="clearfix" id="top">
  <span class="title">{{title}}</span>
</div>

• 第二步：写一个方法（上面命名的锚点id是啥，就找啥）

top() {
  document.querySelector('#top').scrollIntoView(true)
}

• 第三步： 使用

addTab() {
 this.top()
}

我点击新增明细时调用了一下证明方法确实可行。

image.png

如果谁觉得不但要知其然还要知其所以然，请自行百度或谷歌scrollIntoView()的用法和详解。