CODEWITHSUNDEEP
javascriptjqueryhtmlajax
emjay
emjay

Reputation: 219

remembering window scroll position after refreshing a div

just a problem thats been annoying me. I make changes to the database through an ajax call, refresh the div and all that goes okay, but still scroll to the top of the page.

This is what ive tried:

function postdislike(pid, user, uid) {
"use strict";
//user clicks dislike

var hr = new XMLHttpRequest();
var url = "sections/sendpostdislike.php";
var vars = "pid=" + pid + "&user=" + user + "&uid=" + uid;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

hr.onreadystatechange = function() {
    if(hr.readyState === 4 && hr.status === 200)
    {
        var response = hr.responseText;

        //scrollsave = $('#posted_by-'+pid);
        //scrollsave = $(document).scrollTop();






        $('#profilePosts').load('../'+ target +' #profilePosts > *');
        //$('#posted_by-'+pid).load('../'+ target +' #posted_by-'+pid + ' > *');
        //$('#posted_by-'+pid).scrollTop();

        $('html, body').animate({
         scrollTop: ($('#posted_by-'+pid).offset().top-300)},0);





        //$('#reactsub-' + pid).load('../'+ target +'#reactsub-' + pid + ' > *');

    }
};
hr.send(vars);





}

But no matter what I do, the page always jumps to the top. What am I doing wrong?

EDIT: managed to get it to scroll with this, but being animate, it still jumps to the top before scrolling. Is there a way I can get it to just stay there without jumping to the top to begin with?

Upvotes: 0

Views: 145

Answers (2)

emjay
emjay

Reputation: 219

This worked...

function postdislike(pid, user, uid) {
"use strict";

event.preventDefault();

//user clicks dislike

var hr = new XMLHttpRequest();
var url = "sections/sendpostdislike.php";
var vars = "pid=" + pid + "&user=" + user + "&uid=" + uid;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

hr.onreadystatechange = function() {
    if(hr.readyState === 4 && hr.status === 200)
    {
        var response = hr.responseText;

        //scrollsave = $('#posted_by-'+pid);
        //scrollsave = $(document).scrollTop();






        $('#profilePosts').load('../'+ target +' #profilePosts > *');
        //$('#posted_by-'+pid).load('../'+ target +' #posted_by-'+pid + ' > *');
        //$('#posted_by-'+pid).scrollTop();

        //$('html, body').animate({
         //scrollTop: ($('#posted_by-'+pid).offset().top-300)},0);


        //$('#reactsub-' + pid).load('../'+ target +'#reactsub-' + pid + ' > *');

        $(window).on('beforeunload', function() {
            $(window).scrollTop(0);
        });

    }
};
hr.send(vars);

return false;



}

Upvotes: 0

morre
morre

Reputation: 151

You're using 

$(window).scrollTop(scrollsave);

First, scrollTop() doesn't take any arguments.

Second, if you invoke scrollTop() on the window element, you're scrolling to the top of the window.

Invoke scrollTop() on your #profilePosts, then it should work.

Upvotes: 4

Related Questions