锚点的animate使用过程中定位不准确的问题小记
源码:
$('html, body, .S').animate({ scrollTop: $('.a1').offset().top - 133}, { duration: 1500, easing: "swing" });
bug描述1:当滚动的主体不是body时,容易出现滚动不精确的问题
原因1:滚动条overflow并不在body标签上,body标签设置为禁止滚动了,所以不能使用$('html, body'),此时$('html, body, .S')包含了3个dom,一旦出现再有一个外层滚动条时,找不到最内层;并且$('html body .S .S1').offset().top也会被移动到-133
修改1:改成$('html body .S .S1')只包含S1,可准确获取到Dom; 并且每次跳转后将 $('html body .S .S1').offset().top 赋值为0;
bug描述2:基于修改1,出现点击第一次锚点时候定位准确,但是第二次时候就回到第一个了
原因2:第一次点击a1时,$('.a1').offset().top是正数,并且原点为0;,但是第二次点击a2时,原点不为0,并且此时$('.a2').offset().top与原点的差值可能为负数或者其他数值,不等于应有的top值;;也就是说,$('.a').offset().top的值是一个动态值
修改2:改成$('.a')[0].offsetTop
总修改:
var top_height = $('.a1')[0].offsetTop;
$('html body .S .S1').animate({scrollTop: top_height - 133}, { duration: 500, easing: "swing" });
$('html body .S .S1').offset().top = 0;
锚点的animate使用过程中定位不准确的问题小记的更多相关文章
- 网页制作过程中div定位的三个问题
这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...
- 安装Windows 8.1过程中出现的各种问题(无损从MBR转GPT磁盘、不能定位已有分区)
这个周末就安装了个系统,本以为一个小时就能搞定,没想到花费了将近一天. 我的机子是6G内存.500G硬盘,原装系统是Windows 7,现在想换成Windows 8.1,于是下载了64位的Window ...
- H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)
#作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...
- 【图片+代码】:GCC 链接过程中的【重定位】过程分析
作 者:道哥,10+年嵌入式开发老兵,专注于:C/C++.嵌入式.Linux. 关注下方公众号,回复[书籍],获取 Linux.嵌入式领域经典书籍:回复[PDF],获取所有原创文章( PDF 格式). ...
- 原生js模拟锚点,实现点击后,内容定位到本页的对应位置
今天在做angularJS项目过程中,遇见了一个需求,在一个页面中有多个表格,每个表格都有对应的分页,点击顶部对应的模块,可以定位到每个表格模块具体的位置. 页面如下所示: 在angular中,为了使 ...
- JQuery 根据ID在页面中定位
1.锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还 ...
- 【初探Spring】------Spring IOC(三):初始化过程---Resource定位
我们知道Spring的IoC起到了一个容器的作用,其中装得都是各种各样的Bean.同时在我们刚刚开始学习Spring的时候都是通过xml文件来定义Bean,Spring会某种方式加载这些xml文件,然 ...
- SQL Server 2008 安装过程中遇到“性能计数器注册表配置单元一致性”检查失败 问题的解决方法
操作步骤: 1. 在 Microsoft Windows 2003 或 Windows XP 桌面上,依次单击"开始"."运行",然后在"打开&quo ...
- GTD中定位篇
一:为什么要定位? 每天我们的大脑涌现很多想法和要处理很多事情,如果我们没有一套流模式处理这些想法和事情,我们大脑将会处于混战忙碌中,很快就被淹没. 定位的目的: 就是有一套流模式有序的分界我们想法和 ...
随机推荐
- this应用详解-js原生
学习记录,以防遗忘,适合新手解惑.老鸟避让! 在微信H5的开发中,很多页面都是简单的一个模型item在加上很多很多数据组成起来的.例如微信朋友圈,仔细观察,他的一个基本模型就是 “头像图片 + 用户昵 ...
- npm安装material-design-icons总是失败
项目中使用npm或者cnpm安装material-design-icons总是失败 解决办法: 1.自己上github下载后拷贝到项目node_modules目录下 2.还有npm安装老出问题,npm ...
- eclipse光标变粗解决方法
如上图,光标变成黑块好像没那么顺眼,原因是我们不小心按到了insert键造成的,再按一下insert键就OK了,如果delete和insert是一个键那么就用FN键+delete/insert键就可以 ...
- c语言中,在结构体中如何将void *转存为具体需要的数据类型
1. 只需要将该void *类型成员,强制转换为具体的数据类型指针即可.需要注意的是,该强制转换是有风险的,转换时,必须确定void*指向内存实际数据为目标结构体格式,否则可能会出现内存越界访问,从而 ...
- Ubuntu18.04安装常用软件
一.VMwareWorkstation 1.到官网下载VmwareWorkstation,选择Linux版本 2.将下载下来的安装包放到桌面给予x权限,通过命令行进入到桌面的目录sudo ./执行安装 ...
- windows 10系统在右键中添加管理员打开cmd
需要修改注册表内容,新建文件,后缀名改为reg,文件中粘贴下边的代码 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory ...
- 声明一个set集合,使用HashSet类,来保存十个字符串信息,然后通过这个集合,然后使用iterator()方法,得到一个迭代器,遍历所有的集合中所有的字符串;然后拿出所有的字符串拼接到一个StringBuffer对象中,然后输出它的长度和具体内容; 验证集合的remove()、size()、contains()、isEmpty()等
package com.lanxi.demo1_3; import java.util.HashSet; import java.util.Iterator; import java.util.Set ...
- 1. nginx添加自定义http模块(简单)
步骤 1. 新建模块目录2. 添加模块配置文件3. 编写模块源码文件4. 在主配置文件中配置访问location5. 编译加入模块文件6. 测试 新建模块目录 mkdir /opt/nginx/ext ...
- python中对文件、文件夹,目录的基本操作
一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...
- 1.5 select编写
1.with:用于指定临时命名的结果 2.select A from B 在B中查看A 3.into 插入语句 例如:select A.B into 表1 from 表2 4.where 指定搜 ...