vue 实现锚点连接

要实现一个锚点定位的效果，传统方法是用 a 标签的 href 属性和 id 属性来做。

不过并不能达到想要的效果，在Vue项目中，使用传统的在a标签的href属性中写id的方法无效，会导致浏览器的地址改变从而跳转到其他页面。

vue-router 用的是 hash 模式，不能使用传统 a 标签的方式来做锚点定位。

经过各种百度，发现好多用的是以下方式，但是经过实测并没有用，没有实现定位。

（希望有大佬指导下）

document.body.scrollTop = this.$el.querySelector(selector).offsetTop

 而后，发现 scrollIntoView() 方法，实测可用：

// document 和 this.$el 都可以
document.querySelector(selector).scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});

 

// 动画过渡效果-behavior: "auto" 或 "smooth" 默认为 "auto"
// 垂直方向对齐-block: "start", "center", "end", 或 "nearest" 默认为 "start"
// 水平方向对齐-inline: "start", "center", "end", 或 "nearest" 默认为 "nearest"
this.$el.querySelector(selector).scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});

// false === {block: "end", inline: "nearest"}  
// true === {block: "start", inline: "nearest"}
document.querySelector(selector).scrollIntoView(false);  

子组件

<template>
  <div class="form-menu">
    <div v-for="(m, mi) in menuList" :key="mi" @click="toView(m.id)">
      {{ m.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    menuList: {
      type: Array,
      required: true
    }
  },
  methods: {
    toView(id) {
      const row = document.getElementById(id);
      row.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });
    }
  }
};
</script>

 父组件

<template>
  <div class="app">
    <FormMenu :menu-list="menuList" />
      <!-- 选择机构 -->
        <Choose id="1" :form="form" :institutions.sync="institutions" />

        <!-- 基本信息 -->
        <Basic id="2" :form="form" :institutions="institutions" />

        <!-- 联系人信息 -->
        <User id="3" :form="form" />

</template>

<script>
import FormMenu from '@/components/Form/menu';
import Choose from './modules/choose';
import Basic from './modules/basic';
import User from './modules/user';
import Shareholders from './modules/shareholders';
export default {
  components: { FormMenu, Choose, Basic, User, Shareholders },
  data() {
    return {
      form: {},
      institutions: {},
      menuList: [
        {
          label: '选择机构',
          id: '1'
        },
        {
          label: '基本信息',
          id: '2'
        },
        {
          label: '联系人信息',
          id: '3'
        },
        {
          label: '前十大股东',
          id: '4'
        }
      ]
    };
  },
</script>

测试拿 console.log(document.getElementById(id))

   <div v-for="(m, mi) in menuList" :key="mi" @click="toView(m.id)">
        {{ m.label }}
      </div>
      <div id="1">1</div>
      <div>2</div>
      <div>3</div>
    </div>



 methods: {
    toView(id) {
      const row = document.getElementById(id)
      console.log(id, '*****************')
      console.log(document.getElementById(id))
      row.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      })
    }

Element.scrollIntoView() - Web API 接口参考 | MDN


原文链接：https://blog.csdn.net/GrootBaby/article/details/120859544