源码:

$('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使用过程中定位不准确的问题小记的更多相关文章

  1. 网页制作过程中div定位的三个问题

    这几天要做单位的网站,对于做网站我也不怎么样,于是我便在网上参考了一个比较满意的网站,套一下来把这个工作结束了.在此期间遇到了三个关于div定位问题, 一般网站用div布局时都是从上到下分head . ...

  2. 安装Windows 8.1过程中出现的各种问题(无损从MBR转GPT磁盘、不能定位已有分区)

    这个周末就安装了个系统,本以为一个小时就能搞定,没想到花费了将近一天. 我的机子是6G内存.500G硬盘,原装系统是Windows 7,现在想换成Windows 8.1,于是下载了64位的Window ...

  3. H5小技巧之——巧用<a>标签锚链接(#锚点链接 #页面特定位置 #DOM定位 #hash路由中使用锚链接)

    #作者:矩阵鱼--代码中游泳的咸鱼 前端开发中,常遇到定位到页面某特定位置的需求,JavaScript提供的el.scrollIntoView() 和 el.scrollIntoViewIfNeede ...

  4. 【图片+代码】:GCC 链接过程中的【重定位】过程分析

    作 者:道哥,10+年嵌入式开发老兵,专注于:C/C++.嵌入式.Linux. 关注下方公众号,回复[书籍],获取 Linux.嵌入式领域经典书籍:回复[PDF],获取所有原创文章( PDF 格式). ...

  5. 原生js模拟锚点,实现点击后,内容定位到本页的对应位置

    今天在做angularJS项目过程中,遇见了一个需求,在一个页面中有多个表格,每个表格都有对应的分页,点击顶部对应的模块,可以定位到每个表格模块具体的位置. 页面如下所示: 在angular中,为了使 ...

  6. JQuery 根据ID在页面中定位

    1.锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还 ...

  7. 【初探Spring】------Spring IOC(三):初始化过程---Resource定位

    我们知道Spring的IoC起到了一个容器的作用,其中装得都是各种各样的Bean.同时在我们刚刚开始学习Spring的时候都是通过xml文件来定义Bean,Spring会某种方式加载这些xml文件,然 ...

  8. SQL Server 2008 安装过程中遇到“性能计数器注册表配置单元一致性”检查失败 问题的解决方法

    操作步骤: 1. 在 Microsoft Windows 2003 或 Windows XP 桌面上,依次单击"开始"."运行",然后在"打开&quo ...

  9. GTD中定位篇

    一:为什么要定位? 每天我们的大脑涌现很多想法和要处理很多事情,如果我们没有一套流模式处理这些想法和事情,我们大脑将会处于混战忙碌中,很快就被淹没. 定位的目的: 就是有一套流模式有序的分界我们想法和 ...

随机推荐

  1. lr_场景设计之知识点-集合点、loadgenerator

    1.controller原理 通过场景设计来模拟用户的真实操作并调用bugen中的脚本,再通过设置的压力机产生压力,在场景运行中实时监控用户的执行情况,tps,响应时间,吞吐量,服务器资源使用情况: ...

  2. work2:贪吃蛇

    学号:2017*****7219 姓名:邰嘉琛我的码云贪吃蛇项目仓库:https://gitee.com/tjc666/sesnake/tree/master2) 给出你的各项任务完成时间估算与实际消 ...

  3. SharedPreference映射Java类

    package com.overlook.weagree.util; import android.app.Activity; import android.content.Context; impo ...

  4. MFC窗口风格 WS_style/WS_EX_style

    窗口风格(Window style) WS_BORDER   有边框窗口 WS_CAPTION   必须和WS_BORDER风格配合,但不能与WS_DLGFRAME风格一起使用.指示窗口包含标题要部分 ...

  5. java web后台工作原理

    多时候我们都想知道,web容器或web服务器(比如Tomcat或者jboss)是怎样工作的?它们是怎样处理来自全世界的http请求的?它们在幕后做了什么动作?Java Servlet API(例如Se ...

  6. Linux系统的磁盘管理

    Linux系统的磁盘管理有三个命令:df.du.fdisk. df:列出Linux中所有文件系统的整体磁盘使用量: du:对文件和目录所占用磁盘空间的查看: fdisk:用于磁盘分区时列出所有的磁盘. ...

  7. bom与dom的区别

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.Document Object Model的历史可以追溯至1990年代后期微 ...

  8. [Java concurrent][Collections]

    同步容器类 同步容器类包括Vector和Hashtable,二者是早期JDK的一部分.以及一些在JDK1.2中添加的可以由Collections.synchronizedXxx等工厂方法创建的. 这些 ...

  9. Java探针

    使用java代理来实现java字节码注入 使用JavaSsist可以对字节码进行修改 使用ASM可以修改字节码 使用Java代理和ASM字节码技术开发java探针工具可以修改字节码 备注:javass ...

  10. ionic2 rc2 添加版本更新自动升级功能

    不废话,直接上代码 首先安装四个必备的插件: cordova plugin add cordova-plugin-app-version //获取APP版本 cordova plugin add co ...