Javascript 防止加载时整页向上滚动（）_Javascript_Jquery_Html_Css

Javascript 防止加载时整页向上滚动（）

javascript jquery html css

Javascript 防止加载时整页向上滚动（）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用.load（）每隔5秒刷新div的内容当div更新时，整个页面将向上滚动至顶部。有没有办法防止这种情况发生 <body> <app-header condenses reveals effects="waterfall"> <app-toolbar> <div main-title>Title</div> <a href="./login/logout.php"

我正在使用

.load（）

每隔5秒刷新

div

的内容

当

div

更新时，整个页面将向上滚动至顶部。有没有办法防止这种情况发生

<body>    
    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
       <div main-title>Title</div>
       <a href="./login/logout.php" tabindex="-1"><paper-button class="custom white" raised>Log Out</paper-button></a>
      </app-toolbar>
    </app-header>

    <div id="loadcards"></div>
</body>

重新加载时，页面会卷回顶部，因为浏览器很短时间内没有任何div内容。这会导致页面内容变得太小，不需要滚动条，但当重新应用内容时，它可能会变得足够大，再次需要滚动条

选项1

您可以在每次调用重新加载之前将Y偏移量设置为页面顶部，然后在页面完成重新加载时回滚到该偏移量（或者如果页面比以前小，则至少尽可能向下滚动）

可以使用以下代码获取从窗口顶部的当前偏移：

var offsetY = $(window).scrollTop();

如果要滚动回以前的位置，可以通过调用以下命令：

$('html, body').animate({
    scrollTop: $(this).offset().top
}, 300);

这将逐渐滚动，但如果您希望它立即滚动，可以将300设置为0

根据页面加载的效率，您可能仍然会看到页面内容的跳跃

选项2

您也可以将整个DIV放在一个固定高度的容器中，然后重新加载其中的内容。您应该在容器div上至少设置一个最小高度

<div style="min-height: SOME_VALUE">
    <div id="loadcards"></div>
</div>

编辑：我交换了SetInterval回调函数中的两个函数，因为如果LoadCards DIV比以前小，则会导致奇怪的行为。

只需更新层内容，如果没有空的itOr，请在

#加载卡

上设置

最小高度

，以防止在添加/删除内容时调整其大小。不幸的是，最小高度无法正常工作，您喜欢它。我添加了一个额外的编辑备注，因为我认为您在不同的场景中会遇到问题。过来看！

<div style="min-height: SOME_VALUE">
    <div id="loadcards"></div>
</div>

<div id="cardscontainer" style="min-height: SOME_VALUE">
    <div id="loadcards"></div>
</div>

setInterval(function(){
    $("#loadcards").load("getGraph.php");
    $('#cardscontainer').height($('#loadcards').height());
},5000);