PHP + Jquery - page move on top after an ajax call

Question

Hi. I make this code that, after 9 seconds, it call an ajax function, and print the result elaborated from the server to the client.

This is the JS code :

function changeSponsor() {
    $.ajax({
        type: 'POST',
        cache: false,
        url: './auth/ajax.php',
        data: 'id=changespon',
        success: function(msg) {
            $('.menusponsor').hide().fadeIn(1000).html(msg);
        }
    });
}

$(document).ready(function() {
    x=window.setInterval("changeSponsor()", 9000);
});

the result is printed on a div at the top of the page. when the result is printed to the client (after, as said, 9 seconds), and I am at the bottom of the page, the page go automatically at the top. I don't want this.

You can see an exemple at this link : open this page, go to the bottom (is not so long this page) and after few seconds (9). You will se the page scroll at the top.

How can resolve this problem? Cheers

Answer 1

Can you tell us a little more about what happens when the page jumps to the top? Are you calling this function somewhere other than this setInterval?

What does your html look like? If you're replacing a huge portion of the page, it's possible that, for a split second, the page is very short, putting you at the top of the page.

Answer 2

It doesn't look like anything that you mention would move the page up, it must be something else?

I found that the page moves up normally when you do something to the url, like adding a hash (#)? are you adding a hash or altering the url in any way?

solution:

oh the problem is with your html, you need to hide the child of menusponsor and not the container itself.

try this

function changeSponsor() {
    $.ajax({
        type: 'POST',
        cache: false,
        url: './auth/ajax.php',
        data: 'id=changespon',
        success: function(msg) {
            $('.menusponsor').find('div').hide().fadeIn(1000).html(msg);
        }
    });
}