How to scroll to the top of page in IE with jQuery

Question

I have this Javascript below using jQuery that shows a div on a page that when clicked will slowly scroll the page back to the top of the page, it works good with chrome and firefox however when used on IE 8 it just goes to the top immediately instead of a slower scroll up

Can anyone tell me how to overcome this?

// BACK TO TOP
jQuery(window).scroll(function() {
    if (jQuery(window).scrollTop() > 0) $('#jump-link').show();
    else
    $('#jump-link').hide();
});

jQuery('#jump-link').click(function() {
    jQuery('html, body').stop().animate({
        scrollTop: 0
    }, 900);
    return false;
});

This might purely be because IE is a bit crap. I've seen it struggle to do alot of things jQuery can animate (especially more than one at the same time) compared to other browsers, even on quite a powerful system. As far as I'm aware scroll animations work on IE8 - it just might take too long to render the in-between phases so it looks as if there isn't any animation. — totallyNotLizards, Nov 29 '11 at 16:09
you could try changing the time to make it animate over 10 seconds, and see if it still jumps. — totallyNotLizards, Nov 29 '11 at 16:09

score 2 · Answer 1 · answered Nov 29 '11 at 16:14

It's because of the onscroll handler being called repeatedly. Remove the onscroll handler before animating the scroll to the top, then add it back later. Id est, replace the second block with:

jQuery('#jump-link').click(function() {
    jQuery(window).unbind('scroll');
    $('#jump-link').hide();
    jQuery('html, body').stop().animate({
        scrollTop: 0
    }, 900, function() {
        jQuery(window).scroll(function() { ... });

    });
    return false;
});

Note that you can clean up the code by naming the scrolling function, and reference it by name in the unbind and re-binding functions.

(I'm assuming you've checked the even more obvious possibility of $.fx.off being true, right?)

score 1 · Accepted Answer · answered Nov 29 '11 at 16:14

1

$.fn.scrollView = function() {
return this.each(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 1000);
});
};

and use like that

$('html').scrollView();

You can fiddle here (just scroll the bottom of page and click last list-item)

answered Nov 29 '11 at 16:14

Alper

1,085
3
20
39

Thank you, I see you used this $.fn.scrollView Can you explain what this is or where I can find more info on this? – JasonDavis Nov 29 '11 at 16:24
i've found that on http://stackoverflow.com/questions/1586341/how-can-i-scroll-to-a-specific-location-on-the-page-using-jquery/#1586379 page and used in many projects, by $.fn.scrollView way, you can add/extend your custom jquery function. – Alper Nov 29 '11 at 16:35
even you can read more here : http://ryanflorence.com/use-your-fn-jquery-namespace/ – Alper Nov 29 '11 at 16:41

How to scroll to the top of page in IE with jQuery

2 Answers2