vue中使用类似html中a标签的锚链接，实现点击定位到当前页面的某个位置

笑到世界都狼狈

已于 2022-11-09 08:47:49 修改

阅读量3k

点赞数 2

分类专栏： vue.js 文章标签： vue 锚链接点击定位定位到当前页面某个位置 vue 锚链接

于 2022-07-02 20:16:57 首次发布

原文链接：https://www.csdn.net/tags/NtjaUgxsNTgwMDUtYmxvZwO0O0OO0O0O.html

版权

vue.js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

在vue中实现点击文字，定位到当前页面的某个位置，具体实现效果如下图所示：

主要实现方式为：

<div @click="toJump1">定位1</div>

 <div ref="jump1">
    <el-row>
        <el-form-item label="定位1" label-width="75px">夫人夫人规划图</el-form-item>
     </el-row>
 </div>

toJump1() {
   this.$refs['jump1'].scrollIntoView(true);
},

完整代码如下：

<template>
  <div>
    <el-container>
      <el-aside width="120px" class="left-menu">
        <div @click="toJump1">定位1</div>
        <div @click="toJump2">定位2</div>
        <div @click="toJump3">定位3</div>
        <div @click="toJump4">定位4</div>
        <div @click="toJump5">定位5</div>
        <div @click="toJump6">定位6</div>
        <div @click="toJump7">定位7</div>
        <div @click="toJump8">定位8</div>
      </el-aside>
      <el-main style="height: 305px">
        <el-form ref="dataForm" label-position="right">
          <div ref="jump1">
            <el-row>
              <el-form-item label="定位1" label-width="75px">夫人夫人规划图</el-form-item>
            </el-row>
          </div>
          <div ref="jump2">
            <el-row>
              <el-form-item label="定位2" label-width="75px">纷纷热发</el-form-item>
            </el-row>
          </div>
          <div ref="jump3">
            <el-row>
              <el-form-item label="定位3" label-width="75px">纷纷热</el-form-item>
            </el-row>
          </div>
          <div ref="jump4">
            <el-row>
              <el-form-item label="定位4" label-width="75px">非人非为人父</el-form-item>
            </el-row>
          </div>
          <div ref="jump5">
            <el-row>
              <el-form-item label="定位51" label-width="75px">方法refer</el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="定位52" label-width="75px">发顺丰v从</el-form-item>
            </el-row>
          </div>
          <div ref="jump6">
            <el-row>
              <el-form-item label="定位61" label-width="75px">发热微软刚刚发</el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="定位62" label-width="75px">芙蓉厅402</el-form-item>
            </el-row>
          </div>
          <div ref="jump7">
            <el-row>
              <el-form-item label="定位71" label-width="75px">服务范围如果</el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="定位72" label-width="75px">谔谔温热给我个</el-form-item>
            </el-row>
          </div>
          <div ref="jump8">
            <el-row>
              <el-form-item label="定位81" label-width="75px">vfsvfret423r34</el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="定位82" label-width="75px">dadewqewrqrqwerq0</el-form-item>
            </el-row>
          </div>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>


<script>
export default {
  name: 'Demo',
  data() {
    return {


    }
  },
  methods: {
    // 类似html中的锚链接，点击的时候，将对应的内容显示在可视区域内
   toJump1() {
      this.$refs['jump1'].scrollIntoView(true);
    },
   toJump2() {
      this.$refs['jump2'].scrollIntoView(true);
    },
   toJump3() {
      this.$refs['jump3'].scrollIntoView(true);
    },
   toJump4() {
      this.$refs['jump4'].scrollIntoView(true);
    },
   toJump5() {
      this.$refs['jump5'].scrollIntoView(true);
    },
   toJump6() {
      this.$refs['jump6'].scrollIntoView(true);
    },
   toJump7() {
      this.$refs['jump7'].scrollIntoView(true);
    },
   toJump8() {
      this.$refs['jump8'].scrollIntoView(true);
    }
  }
}
</script>


<style lang="scss" scoped>
.left-menu{
  border-right: 1px solid #cccccc;
  div{
    height: 30px;
    line-height: 30px;
    width: 100%;
    padding-left: 10px;
    cursor: pointer;
  }
}
</style>

参考地址