隐藏元素后滚动到顶部不起作用（jQuery）答案

【问题标题】：Scroll to Top does not work after hiding elements (jQuery)隐藏元素后滚动到顶部不起作用（jQuery）
【发布时间】：2014-05-14 21:02:48
【问题描述】：

目前我的菜单有一个功能，可以滚动到页面上的不同 div，作为一种导航形式。目前我正在使用以下方法。

滚动到投资组合

$("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 600);

由于我是动态构建整个页面，当有人点击链接时，我使用 .hide() 隐藏主页元素，并生成其他内容。

function hideElements() {

$("#something").hide();

}

在内容页面上，如果他们想返回投资组合，他们会再次单击投资组合链接。我正在使用以下方法将它们“滚动”到重新显示的元素。

$("#nav").click(){
    unhideMainElements();
    $("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 1200);
    $("#container").fadeIn(300);
}

问题是，淡入淡出会起作用，但不会滚动到元素。我认为它与 .hide() 元素和 .show() 元素有关，但我不知道为什么。我很欣赏任何见解。谢谢！

【问题讨论】：

是滚动到不同的元素，还是根本不滚动？
它滚动到任何没有使用 .hide() 隐藏的元素。如果它使用 .hide() 或 .show()，它不会滚动到它。
jQuery 找不到隐藏元素的位置。 See the docs. 显然，在您尝试找到它们的位置之前，您的元素不是 .shown。
console.log($('#portfolio').offset().top) 表明它给出了 0，这意味着它没有找到正确的偏移量。这可能是问题的根源？

标签： javascript jquery html css animation

【解决方案1】：

您可以尝试使用visibility 属性而不是display：

$('#something').css({'visibility':'hidden'}); //or visible

元素应保持其原始尺寸而不被显示。

【讨论】：

【解决方案2】：

你为什么不尝试 .animate({'opacity':0}) 隐藏然后 .animate({'opacity':1}) 显示，而不是 hide() 和 show()。

【讨论】：

【解决方案3】：

已解决

动画和fadeIn这两个函数被放入unhideMainElements();中的.show()回调中。这样，动画只会在所有 .show() 完成时触发。

我想这是一个时间问题。

感谢您的帮助。

【讨论】：