在vue中实现锚点定位功能

场景如下：

今天早上看到需求方新提的一个需求，这是一份网上答卷，点击题数要实现滚动到对应题目的位置；

注意点：每题题目的高度是不受控制的，你可以取到想跳转的index；（我再循环题目时做了index+1的操作，根据自己去区分index）

想法：我现在每道题目上加个id，类似 :id=`tLink${index+1}`，在点击对应题标时（我这里index是1开始） if(index>1){循环算出小于index的高度和，即为滚动距离}else{滚动距离0}

实现代码简单展示：

$('.examDetail .el-card__body').animate({scrollTop: numTotal},500)

这样就可以完美实现，我自己还增加了大标题高度等控制，所以只贴了参考代码，其实说白了，关键点就是根据题目数计算你要滚动的高度，然后让相应的滚动条滚动该距离;

ps:随手一记，没有养成写博客的习惯，这点我应该要改一下。学习路漫漫，学无止境，记录自己成长的过程还是很幸福的o(*￣▽￣*)o；如果有一样走在前端路上的小伙伴欢迎一起讨论；

转载于:https://www.cnblogs.com/wangxiaoer5200/p/11445540.html

在vue中实现锚点定位功能相关推荐

vue中实现锚点定位
vue中实现锚点定位通过监听滚动事件,高亮显示锚点按钮添加点击事件,根据锚点滚动至对应区域并实现平滑滚动这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的 ...
vue中实现锚点定位以及平滑滚动到指定位置
这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的滚动高度,各个浏览器有所差异,使用以下几种方式: Chrome: document.body.scrollTo ...
vue中实现锚点定位平滑滚动
下面是简单的代码,拿来即用 html//给div盒子设定单击事件和ref名 <div @click="getThere" ref="cat_box"> ...
vue中可编辑div添加@功能
简介 1.有默认值情况下,光标自动定位到最后 2.按@键,或者@+shift组合键,可添加被@姓名 3.可整体删除@姓名 4.在光标位置插入指定html元素如图所示源码(复制另存txt,修改.ht ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
vue中使用锚点x轴y轴
vue中使用锚点(x轴y轴) 需求1:点击左侧导航栏,页面需要滚动到对应的标题.(y轴) 第一步:给中间内容div从第一个开始每一个最外层盒子添加一个class||id一个标识.(不能相同) 第二步: ...
vue中手写一个放大镜功能
vue中手写一个放大镜功能有的时候需要对图片进行放大,类似于电商的商品放大功能,于是在这个想法上写了一个放大镜的功能,并且在放大镜的基础上新添加了一些小功能,下面开始吧! 放大镜是封装的组件的形式, ...
vue项目中实现锚点定位
使用场景:当页面被分割成许多小模块,且页面很长时,锚点功能可以帮助我们快速跳转到想要的模块:而当滑动滚动条时,根据当前视图中的显示的模块自动选中对应的锚点. 思路锚点的id对应模块的元素的id.点击 ...
vue中实现Excel导入导出功能
导入Excel功能前置条件: 依赖包xlsx npm install xlsx -S 这里提供一个现成的在vue中导入Excel的功能(原作者-花裤衩),代码在最下面,可直接复制. 创建一个文件夹, ...
vue中如何实现图片放大镜功能
vue中图片放大镜功能 1.在vue项目中不可避免的会做一个图片放大镜的弄能(例如.商城.店铺等),今天同事问了这个功能恰好以前写过,因此记录一下. 2.废话不多说直接上代码: 父组件中: <t ...

在vue中实现锚点定位功能

在vue中实现锚点定位功能相关推荐

最新文章

热门文章