<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" style="background:red;"></div>
  <div id="page2" style="background:blue;"></div>
  <div id="page3" style="background:skyblue;"></div>
  <div id="page4" style="background:pink;"></div>
  <div id="page5" style="background:green;"></div>
 </div>
 </div>
</template>
<script>
export default {
 data () {
 return {
 }
 },
 methods: {
 Submit (key) {
  debugger
  // 獲取點擊的按鈕對應頁面的id
  var PageId = document.querySelector('#page' + key)
  // 打印出對應頁面與窗口的距離
  console.log(PageId.offsetTop)
  // 使用平滑屬性，滑動到上方獲取的距離
  // 下方我只設置了top，當然 你也可以加上 left 讓他橫向滑動
  // widow 根據(jù)瀏覽器滾動條，如果你是要在某個盒子里面產(chǎn)生滑動，記得修改
  window.scrollTo({
  'top': PageId.offsetTop,
  'behavior': 'smooth'
  })
 }
 }
}
</script>
<style scoped>
.box{
 width: 100%;
}
.page{
 width: 100%
}
.page div{
 width: 100%;
 height: 1000px;
}
</style>