在内容刷新/重新加载后，div滚动至顶部

Question

每隔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; 
    } 
}); 

Answer 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); 
}); 

Answer 2

我想，如果你不更换内容，只有追加新的信息容器会简单地工作。

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

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