jquery - 边缘顶部 :0 starts at top of screen but keeps changing position to unspecified value

Question

编辑:我继续研究这个问题并缩小这个 JS Fiddle 中的问题。

http://jsfiddle.net/r7ab4/4/

单击“按钮 - 向下滚动”将 .col 向下移动。然后单击“BUTTON - RETURN TO 0”将 .col 返回到 marginTop:0，从而将其移回其原始位置。但事实并非如此。它最终会达到某个未指定的值。有什么想法为什么会发生这种情况吗？

原始问题如下。

<小时/>

请引用此测试页来查看我的问题:

http://joinersart.co.uk/test

如果单击页脚中的内容按钮，“col-aboutus”div 将从 height:0 扩展到 height:100%，以显示“内容页面”。单击右上角的主页可返回。

问题:“col-aboutus”div 及其所有子 div 应该设置为 margin-top:0。这意味着您在内容页面中看到的第一个 div 是“SECTION ONE”。当您单击红色链接“下一个 - 第二节”时，顶部边距应动画为“-200px”，这使得内容向上滑动到下一个部分。问题是，一旦您单击红色链接，“col-aboutus”div 的 margin-top 似乎会转到某个未指定的负值，从而抛出“-200px”命令。并且它不会恢复到正确的位置“margin-top:0”。即使当我在 Firebug 中手动输入“0”时，编辑控制台中也会显示“margin-top:0”，但它仍保持未指定的负值。当您单击“home”返回起始页时，代码应重置回 margin-top:0，但一旦按下红色链接，这将不起作用。恢复它的唯一方法是重新加载页面。

也许我错过了一些东西，但请看一下并告诉我。

Answer 1

好吧，看来实际问题被伪装成事实并非如此。所有 marginTop 问题的原因都与 href 链接本身有关。他们似乎有这种默认行为，当单击时将自己的位置(以及任何连接的 div)移动到屏幕/窗口的顶部。由此引发了冲突。为了解决这个问题，我从另一位成员那里看到了这个答案。只需将其添加到您的 href 链接即可:

<a href="#" onClick="return false;">The question?</a>

或者如果您通过 JQuery 执行此操作:

$('a[href="#"]').click(function(event){

    event.preventDefault();

});

原始文章在这里:Unexpected page scroll up when clicking a link