11

I'm working on this page http://dindita.com/preview.html

I added this to make it scroll to the top when someone refreshes the page but doesn't seem to work, I wonder if it's a conflict with the other scrolling scripts I'm using. 

<script type="text/javascript">
    $(document).ready(function(){
    $(this).scrollTop(0);
});
</script>

Any clue?

P.s.: work in progress: messy scripts

anoonimo
  • 367
  • 2
  • 3
  • 13

5 Answers5

36

Try this:

$(document).ready(function() {
  $("html,body").animate({scrollTop: 0}, 100); //100ms for example
});

Or this:

window.onload = function() {
 setTimeout (function () {
  scrollTo(0,0);
 }, 100); //100ms for example
}

Or this:

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

Browsers tend to jump back to their last scroll position on a reload, which makes sense in many cases. It seems that this automatic jump gets triggered right after the onload event (but we don't know the exact moment when this happens), so it makes sense to either use some delay, or have the browser scroll to the top before the page reloads ;)

sebastian
  • 16,470
  • 1
  • 22
  • 18
  • Bloody brilliant! The description at the end of this answer is super too. – atw Jun 17 '15 at 08:22
  • Tip: Chrome 54 and 55 changes scroll position again when loading and pasting some html if its little after onload event. – Torben Dec 09 '16 at 15:17
6

Browsers (at least Chrome) change the scroll position after the page is loaded, not when the DOM is ready.

$(window).load(function(){
    $('html, body').scrollTop(0);
});

If that doesn't work (script is still executed before the browser changes scroll position), you can set a timeout:

$(window).load(function(){
    setTimeout(function() {
        $('html, body').scrollTop(0);
    }, 10);
});
Jakub Kotrs
  • 5,823
  • 1
  • 14
  • 30
  • With the timeout it now works on Firefox and Safari, but not Chrome – anoonimo Sep 27 '13 at 19:11
  • @anoonimo I've found this: http://stackoverflow.com/questions/7035331/prevent-automatic-browser-scroll-on-refresh – Jakub Kotrs Sep 27 '13 at 19:43
  • down in the replies of that topic I found the only solution is working on Chrome so far, but it's hackish $(window).on('beforeunload', function() – anoonimo Sep 27 '13 at 20:07
3

I had that Eureka moment when I tried this and it worked:

<script> location.hash = (location.hash) ? location.hash : " "; </script>

In <head> of your html. Not sure about single page app! But sure works like charm in regular pages.

harshes53
  • 419
  • 1
  • 6
  • 17
  • Its a solution, but only when you want scrollTo(0,0) higher y values dont work in chrome 54, it will jump to 0 – Torben Dec 02 '16 at 18:10
0

This is what I came up with to scroll to top but only when document isn't already at the top, and delayed just enough not to cause an issue with it firing properly:

$(window).load(function() {
    setTimeout(function() {
        if ($(document).scrollTop() !== 0) $("html, body").animate({ scrollTop: 0 }, 'fast');
}, 300);
});
ouija
  • 186
  • 1
  • 6
0

Calling scrollTo and again scrollTo with timer in 10 ms and changing value for 1 px did the job. Working on chrome and safari for each forced refresh.

w = 200;

scrollTo(w - 1, 0);
window.setTimeout (function (){scrollTo(w, 0);}, 10);
boj4n
  • 31
  • 3