刷新/重新加载内容后，div滚动到顶部答案

【问题标题】：Div scrolling to top after contents are refreshed/reloaded刷新/重新加载内容后，div滚动到顶部
【发布时间】：2012-04-03 22:35:39
【问题描述】：

每 5 秒刷新一次 Div。 div 的滚动设置为滚动，以便用户可以滚动，但是当刷新发生时，div 滚动会回到顶部。有什么想法可以在 div 刷新后保持滚动位置？

这是我的 CSS：

#alerts_container {
    height: 150px;
    width: 250px;
    overflow: scroll;
    overflow-x: hidden;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666;
}

JS：

refresh_alerts = setInterval(function (){
    $('#leftside div#alerts_container').load('staffhome.php #alerts_container' );
}, 5000)

HTML：

 <div id='alerts_container'>
  <?php 
   include_once('includes/my_alerts.php'); 
  ?> 
 </div>

使用 SKS 的答案让这个对我有用，但我确实不得不稍微更改他的代码：

var isScrolling = false;
var lastScrollPos = 0;
var counter = 0;
$(function() {
    $('#alerts_container').bind("scroll", function (){
       isScrolling = true;
    });
    refresh_alerts = setInterval(refreshContent, 5000);
    function refreshContent() {
        lastScrollPos = $('#alerts_container').scrollTop();
        if (!isScrolling) {
            $('#alerts_wrapper').load('staffhome.php #alerts_container', function () {
             $('#alerts_container').scrollTop(lastScrollPos);
            });
        }
      isScrolling = false;
    }
});

【问题讨论】：

我正在检查复选标记以回答我的问题。还有其他方法可以将某事标记为有答案吗？

标签： jquery html scroll refresh

【解决方案1】：

您应该使用.scrollTop 在滚动处理程序中获取滚动高度，然后在.load 之后设置它

DEMO -- 尝试一直向下滚动并等待 5 秒以更新新内容。

以下是演示的摘要，

var lastScrollPos = 0;
$('#scrollingDiv').on('scroll', function() {
    lastScrollPos = this.scrollTop;
});

在.load回调中

$('#leftside div#alerts_container').load('staffhome.php #alerts_container' , function () {
   $(this).scrollTop(lastScrollPos);
});

【讨论】：

标记了这个答案，但我确实必须更改一些东西才能让它为我工作。看看我的编辑

【解决方案2】：

我认为如果您不替换内容而只将新信息附加到可以简单工作的容器中。

http://api.jquery.com/jQuery.get/

http://api.jquery.com/append/

【讨论】：