Question

某些上下文：我正在尝试动画滚动到特定元素，我通过调用$(document).ready()中的以下代码来完成此操作：

$('html, body').animate(                                                                      
  // properties                                                                                 
  {
    scrollTop: $("#element").offset().top                                 
  },
  // duration                                                                                   
  500,
  // easing
  "easeOutCubic"
);

我的问题是，对于某些元素，$("#element").offset().top实际上会在我启动动画的时间和我将其设置为目标元素之间发生变化。

我的元素是完全静态的：我没有执行DOM操作，也没有调整任何大小。我在CSS中指定大小，等到$(document).ready()，然后向下滚动。

我可能做错了什么？我是否过早地启动动画，或者在错误的事件处理程序中？动画行为能否以某种方式修改我的元素的位置？

可能相关点：

我正在使用Google网络字体和多个 ~~faces~~ 样式。也许有一些渲染错误？
我在Google Chrome中运行此功能。 ~~我已经检查过，这个问题在Safari~~ 中没有表现出来。编辑：不，它也发生在Safari中。

Answer 1

我已经对此进行了调查，Chrome时间线检查员会在触发动画后显示正在接收字体。这意味着我选择的滚动基于目标元素在应用Google网络字体之前的临时位置。

很明显ready()不是放置此代码的地方。我的下一步是找出合适的地方。

编辑：

找出将此代码放在load处理程序中的正确位置。将代码移动到该方法会导致此问题消失。

Answer 2

对我而言，似乎这是通常在父母不是亲戚但孩子是绝对的时候发生的问题。请看动画元素的父动画需要是相对的，然后如果你只是将上/左调整到动画将导致你需要的效果

从动画开始和结束之间的顶部变化偏移？

2 个答案: