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

在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>

参考地址

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

html中锚链接作用和特点,HTMLa标签作为锚链接
1. 什么是锚链接? 标签主要作为超链接和锚链接使用.超链接主要指不同html页面之间的跳转,而锚链接指的是同一页面之间的跳转. 锚链接的两种效果: 在当前页面中跳转.:通过元素的ID进行跳转网页中 ...
mysql nextval同步锁_mysql中实现类似oracle中的nextval函数
我们知道mysql中是不支持sequence的,一般是建表的时间使这个字段自增. 如 create table table_name(id int auto_increment prima ...
web.py中实现类似Django中的ORM的查询效果
Django中的对象查询 Django框架自带了ORM,实现了一些比较强大而且方便的查询功能,这些功能和表无关.比如下面这个例子: class Question(models.Model):quest ...
oracle nextval mysql_mysql中实现类似oracle中的nextval函数
我们知道mysql中是不支持sequence的,一般是建表的时间使这个字段自增. 如 create table table_name(id int auto_increment prima ...
20、在Linux中实现类似windows中获取配置文件的函数GetProfileString
在读取配置文件时,window环境下,有GetProfileString函数,而Linux下则没有.我写了一个能实现其功能的函数,如下所示,基本思想是捉住配置文件中用"[]"标记的 ...
【VUE】有没有类似React中＜＞空标签的东西呢？
问:Vue中有没有类似React中<>空标签的东西呢? 答:有不废话直接上方案: 方案一 vue2/3应该是通用的方式,vue3上可行若上级使用到<Transition>会 ...
vue实现一个类似浏览器搜索功能(ctrl + f)
目录引言一.介绍自己项目的需求二.先说说我的数据怎么设置的三.具体功能的实现思路: 1.点击左侧目录跳转到对应位置 2.滚动到相应位置左侧目录树的对应标题变蓝色 3.搜索功能 4.目录展开和收 ...
在html中添加滤镜,HTML中的滤镜
在CSS(层叠样式表中)有类似Photoshop中处理图像的滤镜,现简单介绍下,供初学者参考. 一 alpha滤镜的参数 opacity 开始时的透明度 0-100 finishopacity 结束时 ...
超链接标签（外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接）、注释
超链接标签在HTML中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面 1.链接的语法格式 <a href="跳转目标" target=" ...

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

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

最新文章

热门文章