vue关于锚点定位、跳转到指定位置实现方式_Vue.js

vue锚点定位、跳转到指定位置

直接上代码

<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({
        // 不想要滚动动画,则设置为"instant"
        behavior: 'smooth', // 滚动动画
        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>

vue中锚点定位scrollintoview

 <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);
      }
    },

使用element.scrollintoview跳转