场景如下:

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

注意点:每题题目的高度是不受控制的,你可以取到想跳转的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. python常用包

    今日所得 collections模块 时间模块 random模块 os模块 sys模块 序列化模块 subprocess模块 collections模块 namedtuple:具名元组 #定义方式一: ...

  2. 4k高分屏下,chm帮助文档,api文档打开后字体过小的解决

    如图所示: 4k分辨率下,chm文件的正文部分的字体过小,这是这些网页可能使用了CSS维持字体dpi, 在普通分辨率下,可以显示正常,但在高分屏下就会显示得过小,这时我们就需要调整显示网页 的显示效果 ...

  3. ionic3懒加载IonicPage使用报错

    ionic3.X版本有不少亮点.作为从angular1到ionic1.ionic2一直用它们开发单页面应用的使用者来说,一直存在的一个痛点就是,将整个项目作为网页不打包成app的话,第一次加载时间太长 ...

  4. caffe之mac下环境搭建

    参考 http://www.linuxidc.com/Linux/2016-09/135026.html 1. 安装brew,也叫homebrew,mac下类似于ubuntu的apt-get功能 cu ...

  5. C\C++ 位域操作

    几篇较全面的位域相关的文章: http://www.uplook.cn/blog/9/93362/ C/C++位域(Bit-fields)之我见 C中的位域与大小端问题 内存对齐全攻略–涉及位域的内存 ...

  6. HTMLTestRunner测试报告

    把测试报告写入文件中,设置报告生成的路径 测试报告名称上添加时间 HTMLTestRunner文件如下,复制即可用,把该文件放在Lib下即可 """ A TestRunn ...

  7. 维生素D补充过多会中毒

    虽然我们的物质生活越来越丰富,各种食材几乎一年四季都能够吃到,然而却越来越多的人选择进行补充各种维生素,但是你知道吗?维生素不是我们想象中多吃无害的,补充过多也会要人命,特别是最近非常流行补充的一种维 ...

  8. appium ios真机自动化环境搭建&运行(送源码)

    appium ios真机自动化环境搭建&运行(送源码) 原创: f i n  测试开发社区  6天前 Appium测试环境的搭建相对比较烦琐,不少初学者在此走过不少弯路 首先是熟悉Mac的使用 ...

  9. HAProxy实现动静分离和负载均衡

    由于电脑配置渣,带不动多台虚拟机,所以采用httpd虚拟主机的方式来实现 1 2 3 CentOS 6.7 httpd: 2.2.15 HAProxy: 1.5.4 主机规划 1 2 3 4 5 - ...

  10. e代驾狂野裁员 O2O逐渐恢复理智?

    O2O逐渐恢复理智?" title="e代驾狂野裁员 O2O逐渐恢复理智?">     近段时间以来,O2O行业堪称"哀鸿遍野",十分凄惨.巨头 ...