<template>
  <div>
    <nav class="nav">
      <button @click="go('#m1')">昨天</button>
      <button @click="go('#m2')">今天</button>
      <button @click="go('#m3')">明天</button>
    </nav>

    <div style="height: 50px;"></div>

    <div id="m1">
      <h1>昨天</h1>
      <div v-for="item in 50">昨天</div>
    </div>

    <div id="m2">
      <h1>今天</h1>
      <div v-for="item in 50">今天</div>
    </div>

    <div id="m3">
      <h1>明天</h1>
      <div v-for="item in 50">明天</div>
    </div>
  </div>
</template>

<script>
export default {

  data() { return {}; },
  methods: {
    go(selector) {
      document.querySelector(selector).scrollIntoView({
        // 不想要滾動(dòng)動(dòng)畫(huà),則設(shè)置為"instant"
        behavior: 'smooth', // 滾動(dòng)動(dòng)畫(huà)
        block: 'center'
      });
    }
  }
};
</script>

<style scoped>
.nav {
 text-align: center;
 position: fixed;
 top: 0px;
 width: 100%;
 height: 50px;
 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 background: #fff;
}
</style>

 <el-card class="maodian">
            <div slot="header" class="clearfix">
              <span>maodian</span>
            </div>
           
</el-card>
 
 <el-button
                   
                      type="text"
                      @click="handleJump('.maodian')"
                      >maodian</el-button>
 
    Jump(val) {
      const dom = document.querySelector(val);
      if (dom) {
        dom.scrollIntoView(true);
      }
    },