在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;如果有一样走在前端路上的小伙伴 欢迎一起讨论;
在vue中实现锚点定位功能的更多相关文章
- vue中的锚点和查询字符串
1.什么是锚点 锚点(achor):其实就是超链接的一种. 如:普通的超链接 <a href="sub_task_detail.php">详细</a> 主 ...
- html中设置锚点定位的几种常见方法(#号定位)
在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...
- 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能
定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...
- html中设置锚点定位
1.使用id定位: (这样的定位可以针对任何标签来定位. ) <a name="1F" href="#1F">锚点1</a> <d ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- 019——VUE中v-for与computer结合功能实例讲解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue中element 的上传功能
element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...
- VUE中使用canvas做签名功能,兼容IE
<template> <div> <div class="msgInput"> &l ...
- vue滑动吸顶以及锚点定位
Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...
随机推荐
- prototype与__proto__
__proto__是每个对象都有的一个属性,而prototype是函数才会有的属性!!! 使用Object.getPrototypeOf()代替__proto__!!! 一.prototype 几乎所 ...
- Eclipse中项目过大引起的 IDE 加载缓慢,JVM 内存不足的情况解决
如果 IDE 加载项目非常缓慢,甚至常常出现卡死的情况,有可能是开发工具设置的 JVM 内存不够引起的.解决办法:找到 Eclipse 的安装目录,修改 Eclipse.ini 配置文件.修改此配置文 ...
- PEAKS|NovoHMM|Nover|DeepNovo|MAYUPercolator|UniprotKB|Swiss-prot|Mascot|SEQUEST|X!Tandem|pFind|MaxQuant|Msconvert|PEPMASS|LC|
质谱仪: 质谱分析法是先将大分子电离为带电粒子,按质核比分离,由质谱仪识别电信号得到质谱图. Top-down直接得到结果是蛋白. Bottom down使用shutgun方法得到结果是肽段. 由蛋白 ...
- SAGE|DNA微阵列|RNA-seq|lncRNA|scripture|tophat|cufflinks|NONCODE|MA|LOWESS|qualitile归一化|permutation test|SAM|FDR|The Bonferroni|Tukey's|BH|FWER|Holm's step-down|q-value|
生物信息学-基因表达分析 为了丰富中心法则,研究人员使用不断更新的技术研究lncRNA的方方面面,其中技术主要是生物学上的微阵列芯片技术和表达数据分析方法,方方面面是指lncRNA的位置特征. Bac ...
- python两个队列实现一个栈和两个栈实现一个队列
1.两个栈实现一个队列 两个栈stack1和stack2, push的时候直接push进stack1,pop时需要判断stack1和stack2中的情况.如果stack2不为空的话,直接从stack2 ...
- First Django app(各个文件以及文件夹解析)
mkdir mysite cd mysite django-admin.py startproject mysite 执行上面的命令,得到一下内容: mysite/ manage.py mysite/ ...
- LINQ之路 6:延迟执行(Deferred Execution) 笔记
这里刚看的时候不理解. 这个特性在我们通过foreach循环创建查询时会变成一个真正的陷阱.假如我们想要去掉一个字符串里的所有元音字母,我们可能会写出如下的query: IEnumerable< ...
- 整数拆分-dp问题
Integer Partition In number theory and combinatorics, a partition of a positive integer n, also call ...
- React.js/HTML5和iOS双向通信
最近,我使用WKWebView和React.js进行双向通信,自己写了React.js嵌入到Native中. Native操作Web,通过两种方式传值 第一种,通过JS传值给Native 通过这种方式 ...
- MFC中文件对话框类CFileDialog详解及文件过滤器说明
当前位置 : 首页 » 文章分类 : 开发 » MFC中文件对话框类CFileDialog详解及文件过滤器说明 上一篇 利用OpenCV从摄像头获得图像的坐标原点是在左下角 下一篇 Word中为 ...