保证金顶部:0从屏幕顶部开始,但不断将位置更改为未指定的值

时间:2012-11-07 18:55:05

标签: jquery css jquery-animate margin

编辑:我继续看这个问题并缩小这个JS小提琴中的问题。

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

点击“按钮 - 向下滚动”可向下移动.col。然后点击“按钮 - 返回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”。当您单击红色链接“NEXT - SECTION TWO”时,margin-top应设置为“-200px”的动画,这会使内容滑动到下一部分。问题是一旦你点击红色链接,“col-aboutus”div的margin-top似乎会转到一些未指定的减号值,抛弃“-200px”命令。它不会恢复到正确的位置“margin-top:0”。即使我在Firebug中手动输入“0”,它在编辑控制台中也会说“margin-top:0”,但它仍然保留在未指定的减号值。当您单击“home”返回到开始页面时,代码应重置为margin-top:0但是一旦按下红色链接,这将无效。将其恢复的唯一方法是重新加载页面。

也许我错过了什么,但请看看并告诉我。

1 个答案:

答案 0 :(得分:0)

好的,所以看来实际的问题是伪装成它不是的东西。所有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