自动刷新Div，而无需滚动到Div的顶部

Question

I have a script that refreshes a Div on my website every 20 seconds. The problem is, once it refreshes, it scrolls to the to of the Div. I want it to stay at the last position and not scroll to the top after a refresh. Could someone please look at this script and maybe point out what I'm doing wrong? Thanks in advance!

var time = new Date().getTime();

var refreshTime = 20*1000;

$(document).bind("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error hover change", function(e) {
    time = new Date().getTime(); 
});

var lastScrollPos = 0;

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

function refresh() {

    if(new Date().getTime() - time >= refreshTime)

        $('#feed1').load(location.href="/dashboard" , function () {
            $(this).scrollTop(lastScrollPos);
        });

    else

        setTimeout(refresh, refreshTime);

}

setTimeout(refresh, refreshTime);

Answer 1

If you do location.href="/dashboard" , the browser will discard all the page's state (including scripting variables) and load "/dashboard" (assigning a value to location.href is identical to calling location.assign("/dashboard") ).

The jQuery load function will probably not even require you to reposition the scroll offset, if you gave it chance to execute!

Try:

$('#feed1').load("/dashboard #feed1");

UPDATE:

It seems the HTTP request fired by jQuery's load mechanism is receiving a truncated response in your case (content-length: 0).

You would have to put the scroll position you want to keep into localStorage. Try:

var time = new Date().getTime();

var refreshTime = 20*1000;

$(document).bind("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error hover change", function(e) {
    time = new Date().getTime(); 
});

var previousScrollPos = localStorage.getItem("lastScrollPos");
if(previousScrollPos)
{
    $('#feed1').scrollTop(previousScrollPos);
    localStorage.removeItem("lastScrollPos");
}

function refresh() {

    if(new Date().getTime() - time >= refreshTime)
    {
        localStorage.setItem("lastScrollPos", $('#feed1').scrollTop());
        location.reload();
    }

}

setInterval(refresh, refreshTime);

I'm not 100% sure that you want to bind to the scroll event of #feed1 or just of body, I haven't seen your page. If anybody clicks "load more" on the news feed, those additional items will be hidden again since you're reloading the page. Not ideal at all.

Many users will hate having the page periodically reload, it's also an accessibility failure since this will interfere with screen reading software. It might be a simpler idea to just put a refresh newsfeed icon on the page, which just reloads the whole page, when the user wants to (instead of periodically).

Answer 2

Why don't you use feed1 div only for loading your dashboard contents and handle its position using style.

#feed1 {
height: 150px;
overflow: auto;

}

Add other data outside feed1 div because load method will overwrite feed1's content.

See this example if you are looking for something similar otherwise you can modify this example so that other can understand your requirement/scenario.