jQuery cross-browser "scroll to top", with animation
Solution 1
You're returning true
from the click function, so it won't prevent the default browser behaviour (i.e. navigating to thego-to-top
anchor. As Mark has said, use:
$('html,body').animate({ scrollTop: 0 }, 'slow');
So your code should now look like:
$('#go-to-top').each(function(){
$(this).click(function(){
$('html,body').animate({ scrollTop: 0 }, 'slow');
return false;
});
});
Solution 2
To get it to work in opera this answer proved helpful.
Putting that with your click()
$(this).click(function() {
$(window.opera ? 'html' : 'html, body').animate({
scrollTop: 0
}, 'slow');
});
Side note if all you are doing with the .each()
is assigning a click handler you do not need to iterate over the collection it can be simplified to this:
$('#go-to-top').click(function(){
$(window.opera ? 'html' : 'html, body').animate({
scrollTop: 0
}, 'slow');
});
Also if there is more than one element with id #go-to-top
your markup will be invalid, try switching it to a class .go-to-top
Solution 3
maybe something like
$('body').animate({scrollTop:0}, 'slow');
aswell as the html one.
edit >
$('#go-to-top').each(function(){
$(this).click(function(){
$('html').animate({ scrollTop: 0 }, 'slow'); return true;
$('body').animate({ scrollTop: 0 }, 'slow'); return true;
$('document').animate({ scrollTop: 0 }, 'slow'); return true;
$('window').animate({ scrollTop: 0 }, 'slow'); return true;
});
});
should cover all browsers!
Solution 4
$(window).animate({ scrollTop: 0 }, 'slow');
It works cross-browser
Solution 5
Hm... strange, with jsFiddle I can get it to work fine in Opera (ver 11.01), but in Chrome it just jumps up to the top and doesn't animate it like you want to.
You can se the jsFiddle here if you want to: http://jsfiddle.net/H7RFU/
I hope that helps a bit, though it's not really an answer.
If what I have made isn't what your html etc looks like, please update it and add it.
Best regards,
Christian
Caveat: I haven't used the save function of jsFiddle before so I dunno for how long it it saved.
Related videos on Youtube
Comments
-
Alex almost 2 years
Right now I'm using this:
$('#go-to-top').each(function(){ $(this).click(function(){ $('html').animate({ scrollTop: 0 }, 'slow'); return true; }); });
which doesn't work in Chrome, and in Opera I get a small flicker: the browser instantly scrolls to the top, then back to the bottom and then it begins to scroll slowly back to top, like it should.
Is there a better way to do this?
-
Chowlett about 13 yearsNote that
#go-to-top
is an element ID, which must be unique. Callingeach
on something that should only contain one element may work, but is naughty. Probably you want to give your elements a class instead, and select with$('.go-to-top')
-
-
Alex about 13 yearsthat was it, with return set to
false
it scrolls :D -
Lars Ebert over 10 yearsStill the
each
is absolutely unneccessary. Even if there were multiple elements with the id go-to-top, thenclick
on its own would be more than enought! -
Tom Kincaid over 10 yearsUsing html,body will cause the callback to fire twice. Just using html works for me.
-
BenM over 10 yearsSorry, using
html,body
does not cause the callback to fire twice. Indeed, it is needed for certain browsers. -
Quentin S. over 7 yearsUsing
return true
on l.3 will prevent any following statement to be executed -
Gras Double over 5 yearsSince then, Opera has switched to the WebKit engine, so I guess the special handling for it is no longer needed, and probably even harmful.