场景如下:

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

注意点:每题题目的高度是不受控制的,你可以取到想跳转的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. 在CMD中操作mysql数据库出现中文乱码解决方案

    百度了一下..有说将cmd字符编码用chcp命令改为65001(utf8字符编码),可这样之后根本无法输入中文,查询出的中问结果依旧乱码 其实,只要保证cmd客户端和MySQL两者编码一致即可. 但现 ...

  2. CocoaPods 安装和使用 - darcy_tang 的博客

    最近换了新机器,重新搭建了开发环境,其中当然包括 CocoaPods. 装完顺便更新下 CocoaPods 安装文档. 正文 安装 CocoaPods 是用 ruby 实现的,要想使用它首先需要有 r ...

  3. npm安装依赖太慢问题

    执行 npm install 会发现很慢,可以在安装时手动指定从哪个镜像服务器获取资源,我使用的是阿里巴巴在国内的镜像服务器. 命令如下: npm install --registry=https:/ ...

  4. <USACO09JAN>气象测量/气象牛The Baric Bovineの思路

    我..莫名其妙搞出来的 随便搞搞..幻想中的dp结果对了 我也很迷茫 Description 为了研究农场的气候,Betsy帮助农夫John做了N(1 <= N <= 100)次气压测量并 ...

  5. SQL语言基础及数据库的创建

    一.数据类型:1.二进制数据二进制数据以十六进制形式存储.二进制数据最多能存8000个英文字符,4000个汉字字符. 2.字符数据char:存100,不足100补足.varcha:存多少占多少. 3. ...

  6. github 下载部分代码

    作者:知乎用户链接:https://www.zhihu.com/question/25369412/answer/96174755来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  7. 改变生活的移动计算——感受 MobiSys 2015

    MobiSys 2015" title="改变生活的移动计算--感受 MobiSys 2015"> 作者:微软亚洲研究院研究员 张健松 今年的MobiSys会议地点 ...

  8. Mac下好玩的终端命令

    figlet brew install figlet cowsay brew install cowsaycowsay -l: 查看所有可用动物cowsay -f daemon hello world ...

  9. Introduction Of Gradient Descent

    不是一个机器学习算法 是一种基于搜索的优化方法 作用:最小化一个损失函数 梯度上升法:最大化一个效用函数 import matplotlib.pyplot as plt import numpy as ...

  10. 树的三种DFS策略(前序、中序、后序)遍历

    之前刷leetcode的时候,知道求排列组合都需要深度优先搜索(DFS), 那么前序.中序.后序遍历是什么鬼,一直傻傻的分不清楚.直到后来才知道,原来它们只是DFS的三种不同策略. N = Node( ...