Vue 使用原生 js 实现锚点定位到指定位置

2022年7月2日

Vue
JavaScript

锚点定位
href定位
原生js定位

大约 1 分钟

Vue 使用原生 js 实现锚点定位到指定位置

方式一：传统href锚点定位

网上有很多通过href锚点定位的方式，也有很多千奇百怪的方法！这种跳转方法实现的是从某个位置跳转到同页面的另一个位置。

通过href定位会在访问地址栏中增加ID值，影响url正常请求，不太友好；另外是href定位如果不想定位到浏览器界面顶部位置时，需要在对应的ID值内部元素中增加外间距，如果需要多个同样定位元素展示，就会导致间距过大页面太难看了。

类似如下图效果，就不太实用：

方式二：原生js指定位置定位

这种方式就可以解决多个同界面的不用元素锚点定位，只需要两步操作非常简单，网上的方式有些都是乱用方法。

侧边栏锚点定位不同元素位置，vue界面

<template>
  <aside class="left-bar">
    <ul>
      <li @click="goMarginTop('block-0')"><span>常用工具</span></li>
    </ul>
  </aside>
  <div style="margin-top: 20px" id="block-0">距离当前浏览器界面顶部20px</div>
</template>

利用原生js实现指定位置定位，js代码

export default {
  methods: {
    goMarginTop(value){
      let offsetTop = document.getElementById(value).offsetTop - 20;
      window.scrollTo(0,offsetTop);
    }
  },
};