JavaScript and jQuery scrolling issue in all browsers

Question

Hi,

I just launched http://tweetmp.org.au/ with a stack of new features, including the MP Spotlight you can see on the Homepage

Every few seconds, the following code is run,

// get the next it
var nextId = ids[Math.floor(Math.random() * ids.length)];

$.get('/GetSummary?id=' + nextId, function(result) {

   if (result) {
            $('#memberList').fadeOut('slow',function() {
                $(this).html(result).fadeIn('slow');
             });
    }
});

which goes and fetches the next MP and fades the old one out and the new one in. Looks great!

BUT

If you scroll down to the bottom of the page, and wait till the MP spotlight refreshes, the browser scrolls back to #memberList

Does anyone know what's causing this? How can I stop it from scrolling?

Any help is greatly appreciated.

Answer 1

Can you try:

$.get('/GetSummary?id=' + nextId, function(result) {

   $('#memberList').fadeOut('slow').html(result).fadeIn('slow');

});

?

Answer 2

I've fixed it.

I changed the fadeIn and fadeOut to fadeTo between 0.01 and 1.0

It appears jQuery sets display:none when the opacity reaches 0, thus decreasing the size of the page (forcing the scroll up)