场景如下:

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

注意点:每题题目的高度是不受控制的,你可以取到想跳转的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学习笔记:Python uWSGI 安装配置

    本文主要介绍如何部署简单的 WSGI 应用和常见的 Web 框架. 以 Ubuntu/Debian 为例,先安装依赖包: apt-get install build-essential python- ...

  2. [洛谷P2785] 物理1(phsic1)-磁通量

    随便翻到的一道题...... 题目传送门 这道题是用向量叉积求多边形面积. 首先讲一下向量叉积(也叫外积). 设两个向量的坐标表示为(x1,y1).(x2,y2). 那么它们的叉积为x1*y2-x2* ...

  3. CIA Hive Beacon Infrastructure复现1——使用Apache mod_rewrite实现http流量分发

    0x00 前言 2017年11月9日维基解密公布一个代号为Vault8的文档,包含服务器远程控制工具Hive的源代码和开发文档.开发文档中的框架图显示Hive支持流量分发功能,若流量有效,转发至Hon ...

  4. 利用Load命令将本地文本里面的数据导入到MySQL数据库

    摘要:在使用MySQL是我们可能会遇到要向我们的表中插入大量的数据如果都使用以下的语句在命令行输入有点不太切实际,幸好MySQL为我们提供了LOAD命令可以批量的从本地文件向MySQL表中导入数据! ...

  5. 吴裕雄--天生自然 python数据分析:基于Keras使用CNN神经网络处理手写数据集

    import pandas as pd import numpy as np import matplotlib.pyplot as plt import matplotlib.image as mp ...

  6. python socket实例

    1.客户端向服务端发送 #coding:utf-8 '''客户端''' import socket khd=socket.socket() #声明socket类型,同时生产socket连接对象 khd ...

  7. Laravel 队列使用

    触发 任务的触发,主要的实现是在IlluminateFoundationBusDispatchesJobs这个trait中实现的,其只包含两个方法 protected function dispatc ...

  8. Django中加载static无法成功的解决方法

    我试着进入/admin/ 结果它的/static/ 能够正常找到目标文件…真是日了哈*奇了. 我的link标签href=/static/…. 并没有什么问题 试着在urls中加入下面代码,但是没什么用 ...

  9. iPhone X会成为苹果最短命的旗舰机型吗?

    最近,有媒体报道有凯基证券分析师郭明琪在他的最新报告指出,iPhone X将在今年中结束生产.因为苹果已计划下半年推出新款iPhone,价格也比iPhone X会低并有新功能发布.所以他预计iPhon ...

  10. AWS CloudFront / 亚马逊CDN使用教程

    步骤: 1. 打开CloudFront服务之后,首先需要选择分发类型.分发类型分为一般的静态文件分发和流媒体分发,即Web和RTMP,我的站点即选择Web类型. 2. CDN回源设定. a. 首先要填 ...