原理
通过计算对应id的组件距离页面顶部的距离,来使用window.scrollTo丝滑跳转到该位置
代码如下:
html
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<button @click="scrollTo('test1')">丝滑跳转到指定id的div位置</button>
javascript
function scrollTo (id) {
// 获取点击的按钮对应页面的id,及其相较于顶部的距离
var PageId = document.querySelector('#' + id);
var topHeight = PageId.offsetTop;
// 使用平滑属性,滑动到上方获取的距离
window.scrollTo({
'top': topHeight,
'behavior': 'smooth'
})
}