在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>
参考地址
