jquery - jQuery 操作导致页面滚动到顶部

Question

我有一堆lis：

<li id="rules-button">Rules</li>
<li id="download-button">Download WK</li>
<li id="gallery-button">Gallery</li>

他们有相关的 jQuery 动作来显示和隐藏div：

var rulesButton = $( '#rules-button'),
downloadButton = $( '#download-button' ),
galleryButton = $( '#gallery-button' );

...

rulesButton.on("click", function(){
    home.fadeOut(300);
    gallery.fadeOut(300);
    contact.fadeOut(300);
    about.fadeOut(300);
    download.fadeOut(300);
    rules.delay(300).fadeIn(300);
    return false;
});
downloadButton.on("click", function(){
    home.fadeOut(300);
    gallery.fadeOut(300);
    contact.fadeOut(300);
    about.fadeOut(300);
    rules.fadeOut(300);
    download.delay(300).fadeIn(300);
    return false;
});
galleryButton.on("click", function(){
    home.fadeOut(300);
    download.fadeOut(300);
    contact.fadeOut(300);
    about.fadeOut(300);
    rules.fadeOut(300);
    gallery.delay(300).fadeIn(300);
    return false;
});

每当我单击它们时，它们会在显示另一个之前滚动回页面顶部div。这是一个通用解决方案的常见问题吗？谢谢。

Answer 1

我发现因为我让divs 消失了，所以没有元素可以填充空间。我只是给我的容器div一个 min-height 属性。