Question

我正在创建一个包含两个部分的页面，我可以通过点击标题将内容.load()加载到#container。

<div id="dogs">[dogs]</div> 
<div id="cats">[cats]</div>
<div id="container"></div>

我的问题

当加载的内容太小时，页面会向下跳跃，

$("#dogs").trigger("click");   //initial

$("#cats").click(){function(){
      $("#container").load("content.php?s=cats"); //after click

}}

$("#dogs").click(){function(){
      $("#container").load("content.php?s=dogs"); //after click


}}

如何在加载内容后阻止页面向下和向下跳转？我希望它保持稳定。

作为修复，我在页面底部添加了<div style="height:600px"></div>，但滚动后下面有足够的空间，我不喜欢。

Answer 1

您可以尝试添加此代码段，看看是否有帮助：

if (location.hash) {
  setTimeout(function() {
    window.scrollTo(0, 0);
  }, 1);
}

Answer 2

我会做这样的事情：

<强> HTML

<div class="btn" id="dogs">[dogs]</div> 
<div class="btn" id="cats">[cats]</div>
<div id="container"></div>

<强> JQuery的

$(document).ready(function(){
    $('body').on('click', '.btn', function(){ //When btn class is clicked
        var idValue = $(this).attr('id') //Get the id value of the clicked div
        $('#container').css({ //Prevent scrolling
            "height": "100%",
            "overflow": "hidden"
        });
        $("#container").load("content.php?s="+idValue, function(){
            //When container is loaded
            $('#container').css({ //Allow scrolling
                "height": "auto",
                "overflow": "visible"
            });
        });
    });
});

我没有测试过，所以如果你遇到任何问题，请告诉我。

编辑：也许您应该使用body而不是#container，因为现在我假设当您点击按钮时它会跳一次。

在加载内容后阻止页面向下和向上跳转.load（）Jquery

2 个答案: