在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= ...
随机推荐
- CSS预处理技术
CSS自定义变量 这是一个实验中的标准,后续的具体写法和解析可能会有变动. 与Less|Sass等预处理器不同的是CSS变量带有语义效果,并且不需要额外的编译.因为其名称本身就包含了语义的信息,这使得 ...
- Activiti 5.16 用户手册
http://www.mossle.com/docs/activiti/index.html#bpmnNoneStartEvent Activiti 5.16 用户手册
- textarea 是否换行的问题解决
需求:判断当前textarea是否已经换行(这个换行有2种方式:1.不断输入文字直到超过指定宽度后自动换行:2.按了回车以后进行换行) 单纯的解决第二种换行很简单.网上提供了很多常规的解决方案. De ...
- Typescript - 联合类型
原文:TypeScript基本知识点整理 零.序言 联合类型表示一个变量值可以是几种类型之一,我们可以使用 “|” 来分割每个类型: 联合类型的变量在被赋值时,会根据类型推断的规则推断出一个类型: 如 ...
- <JZOJ5937&luogu3944>斩杀计划&肮脏的牧师
第一次写桶排相关题.... #include<cstdio> #include<iostream> #define rint register int template < ...
- linux vi命令详解及使用技巧
进入vi的命令vi filename :打开或新建文档,并将光标置于第一行首vi +n filename :打开文档,并将光标置于第n行首vi + filename :打开文档,并将光标置于最后一行首 ...
- NSURLSession与NSURLConnection区别
1. 使用现状 NSURLSession是NSURLConnection 的替代者,在2013年苹果全球开发者大会(WWDC2013)随ios7一起发布,是对NSURLConnection进 ...
- 恭祝2018元旦快乐!转发享福利(⊙o⊙)…
来源:中国工信出版集团-电子工业出版社赠送给作者的原书. 为感谢2017年你的不离不弃,在2018新年之际来一发,转发朋友圈集齐20个赞,即参与活动, 活动规则: 1 转发朋友圈+集齐20个赞?, ...
- 机器学习的盛宴:NIPS 2015
作者:微软亚洲研究院实习生:林添 冰雪王国的浪漫 机器学习的盛宴 NIPS(Advances in Neural Information Processing Systems,神经信息处理系统进展大会 ...
- Redis简单的数据操作(增删改查)
#Redis简单的数据操作(增删改查): 字符串类型 string 1. 存储: set key value 127.0.0.1:6379> set username zhangsan OK 2 ...