锚点的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中定位篇
一:为什么要定位? 每天我们的大脑涌现很多想法和要处理很多事情,如果我们没有一套流模式处理这些想法和事情,我们大脑将会处于混战忙碌中,很快就被淹没. 定位的目的: 就是有一套流模式有序的分界我们想法和 ...
随机推荐
- java根据#号截取字符串,使用Pattern的方法
public class Regex1 { public static void main(String[] args) { String s = "神秘的海洋出现了一只#话题#海怪阿拉斯加 ...
- python修炼第二天
第二天的课程还是塞得满满的,一天下来充实也疲惫.那天听出金星师傅嗓子有些沙哑,想必是讲课说话太多导致.啥也不说了.唯有努力练功方可回报! 1 序: 今天主要是详细学习了绝大部分的数据类型,字符编码,边 ...
- win10 adb(Android Debug Bridge)导出日志
百度了一下 各种设置环境变量.放到system32文件夹(64位系♂统放到C:\Windows\SysWOW64)等 公司电脑win10系统 方便多了 把环境变量设置啥的全删了 adb下载地址:htt ...
- 19_04_19校内训练[Game]
题意 给出n,等概率地生成一个1~n的数列.现在有n个人从左到右站成一排,每个人拿有当前数列位置上的数字,并且一开始都不知道数字是多少(但知道n是多少).从左到右让每个人进行如下选择: 1.选择保留自 ...
- C# [Win32] [GDI+] [API] Load HFONT from Memory
// gdiplusenums.h //-------------------------------------------------------------------------- // Fo ...
- springboot 多端口启动
以eclipse(STS)为例, 选中项目右键Run Configurations 点击Spring Boot App,选中需要设定多端口项目,在启动参数一栏输入:-Dserver.port=7003 ...
- ES6 中 Promise
在说Promise之前我们先简单说一下什么是同步异步? 同步(Sync):所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作. 异步(Async):异步与同步相对, ...
- git 的安装与初始化
1搭建本地git服务器: 1.1安装git 对于ubuntu系统,一般自带git,可以使用git --version 查看版本号 ,或使用apt-get install git . centos上对 ...
- bash配色
Table of Contents PS1格式 基本格式 其它可能的格式 PS1配色方案 配置文件 bash的命令提示符和终端外观由环境变量PS1定义 PS1格式 基本格式 \u 显示当前用户名 \h ...
- Java作业:第一次过程性考核 ——长春职业技术学院 16级网络工程
Java作业:第一次过程性考核 ••<结构化程序设计>•• 考核目标:初步了解Java基本语法规则,学习结构化程序设计思想. 码云链接:https://gitee.com/SoridoD/ ...