场景如下:

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

注意点:每题题目的高度是不受控制的,你可以取到想跳转的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中实现锚点定位功能的更多相关文章

  1. vue中的锚点和查询字符串

    1.什么是锚点 锚点(achor):其实就是超链接的一种. 如:普通的超链接 <a href="sub_task_detail.php">详细</a>  主 ...

  2. html中设置锚点定位的几种常见方法(#号定位)

    在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id=&q ...

  3. 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能

    定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...

  4. html中设置锚点定位

    1.使用id定位: (这样的定位可以针对任何标签来定位. ) <a name="1F" href="#1F">锚点1</a> <d ...

  5. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  6. 019——VUE中v-for与computer结合功能实例讲解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. vue中element 的上传功能

    element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...

  8. VUE中使用canvas做签名功能,兼容IE

    <template>         <div>           <div class="msgInput">             &l ...

  9. vue滑动吸顶以及锚点定位

    Vue项目中需要实现滑动吸顶以及锚点定位功能.template代码如下: <template> <div class="main"> <div id= ...

随机推荐

  1. CSS预处理技术

    CSS自定义变量 这是一个实验中的标准,后续的具体写法和解析可能会有变动. 与Less|Sass等预处理器不同的是CSS变量带有语义效果,并且不需要额外的编译.因为其名称本身就包含了语义的信息,这使得 ...

  2. Activiti 5.16 用户手册

    http://www.mossle.com/docs/activiti/index.html#bpmnNoneStartEvent   Activiti 5.16 用户手册

  3. textarea 是否换行的问题解决

    需求:判断当前textarea是否已经换行(这个换行有2种方式:1.不断输入文字直到超过指定宽度后自动换行:2.按了回车以后进行换行) 单纯的解决第二种换行很简单.网上提供了很多常规的解决方案. De ...

  4. Typescript - 联合类型

    原文:TypeScript基本知识点整理 零.序言 联合类型表示一个变量值可以是几种类型之一,我们可以使用 “|” 来分割每个类型: 联合类型的变量在被赋值时,会根据类型推断的规则推断出一个类型: 如 ...

  5. <JZOJ5937&luogu3944>斩杀计划&肮脏的牧师

    第一次写桶排相关题.... #include<cstdio> #include<iostream> #define rint register int template < ...

  6. linux vi命令详解及使用技巧

    进入vi的命令vi filename :打开或新建文档,并将光标置于第一行首vi +n filename :打开文档,并将光标置于第n行首vi + filename :打开文档,并将光标置于最后一行首 ...

  7. NSURLSession与NSURLConnection区别

    1. 使用现状      NSURLSession是NSURLConnection 的替代者,在2013年苹果全球开发者大会(WWDC2013)随ios7一起发布,是对NSURLConnection进 ...

  8. 恭祝2018元旦快乐!转发享福利(⊙o⊙)…

    来源:中国工信出版集团-电子工业出版社赠送给作者的原书. 为感谢2017年你的不离不弃,在2018新年之际来一发,转发朋友圈集齐20个赞,即参与活动, 活动规则: 1   转发朋友圈+集齐20个赞?, ...

  9. 机器学习的盛宴:NIPS 2015

    作者:微软亚洲研究院实习生:林添 冰雪王国的浪漫 机器学习的盛宴 NIPS(Advances in Neural Information Processing Systems,神经信息处理系统进展大会 ...

  10. Redis简单的数据操作(增删改查)

    #Redis简单的数据操作(增删改查): 字符串类型 string 1. 存储: set key value 127.0.0.1:6379> set username zhangsan OK 2 ...