vue 实现平滑滚动及导航栏固定偏移问题

一. 实现页面平滑滚动

html：

<a class="nav-link active" @click="scrollHome">HOME</a>

<home id="home" ref="hone"></home>

method：

scrollHome () {
  document.getElementById('home').scrollIntoView({ block: 'start', behavior: 'smooth' })
}

二 . 解决导航栏固定偏移问题

如果导航栏固定在顶部，滚动距离就会出现偏差。

在网上多番百度后，找到了解决方法：

document.documentElement.scrollTop = this.$refs.home.offsetTop - 导航高度

虽然解决距离问题，但是发现平滑效果失效了…

然后就去查了scrollIntoView的参数

网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

把第一个滚动的页面的block设置为end，对底部对齐。

document.getElementById('home').scrollIntoView({ block: 'end', behavior: 'smooth' })

然后问题解决啦，不过有点小瑕疵，至少大bug是没有啦~