滚动条滚动到指定位置

<template>

<div class="box">

<div class="btn">

  <span @click="Submit(1)">按钮一</span>

  <span @click="Submit(2)">按钮二</span>

  <span @click="Submit(3)">按钮三</span>

  <span @click="Submit(4)">按钮四</span>

  <span @click="Submit(5)">按钮五</span>

</div>

<div class="page">

  <div id="page1" ></div>

  <div id="page2" ></div>

  <div id="page3" ></div>

  <div id="page4" ></div>

  <div id="page5" ></div>

</div>

</div></template><script>export default {

data () {

return {

}

},

methods: {

Submit (key) {

  // 获取点击的按钮对应页面的id

  var PageId = document.querySelector('#page' + key)

  // 打印出对应页面与窗口的距离

  console.log(PageId.offsetTop)

  // 使用平滑属性，滑动到上方获取的距离

  // 下方我只设置了top，当然 你也可以加上 left 让他横向滑动

  // widow 根据浏览器滚动条，如果你是要在某个盒子里面产生滑动，记得修改

  window.scrollTo({ **//window可以替换为指定的dom元素 document.querySelector('.xxx').scrollTo({})**

  'top': PageId.offsetTop,

  'behavior': 'smooth'

  })

}

}

}

</script><style scoped>.box{

width: 100%;

}

.page{

width: 100%

}

.page div{

width: 100%;

height: 1000px;

}

</style>