1

I have finished developing my website and I am testing it. I run a script after 1 second to check the height of the header/top and add a margin-top to the content section. but this header/top changes sizes depending on the scroll position (on runtime). So first I have to make sure the page scroll is set to (top) 0 and then run this script. Sometimes the user has scrolled down and refreshed, and the natural browser's behavior is to scroll the page to where it was.

After several attempts on Google Chrome and after commenting most of my code that is triggered when page loads, I tried the same on Firefox and it works! So this code doesn't work on Chrome:

$(document).scrollTop(0);
// or this 
$(document).ready(function(){ $(this).scrollTop(0); });

I used the animate function and passed a callback to alert "Hello" and it alerts on top, then I click "Ok" and it goes back to where the scroll was before the refresh.

I also tried without jQuery and nothing happens

window.scrollTo(0,0);

On Firefox it works fine. No Javascirpt code is running BUT the scrollTop (maybe things like social plugins, but nothing mine).

Does anybody know a workaround or how to fix it? Whats the matter with Chrome?

Victor Ferreira
  • 6,151
  • 13
  • 64
  • 120
  • Try this: `$('body,html').animate({ scrollTop: 0 }, 500);` It work for me. – Petroff Mar 23 '15 at 05:04
  • @Petroff No, same happens. Used the callback and it goes to the top, alerts my msg and then goes back to the very point it was before the refresh (what suggests it can't be just a matter of coincidence, it's not going anywhere in the middle of the page, the browser knows where it wants to scroll to). tried your code on Firefox and works great – Victor Ferreira Mar 23 '15 at 05:09
  • works with a higher amount of time though... – Victor Ferreira Mar 23 '15 at 05:16

4 Answers4

1

I'm using Chrome 41 and this works:

$("html, body").animate({
        scrollTop: 0
    }, 9000);
Rufus
  • 171
  • 8
  • can you try it with 500 milliseconds (half second) and tell me what happens please? scroll to at least 500px or maybe a little more, just to see what happens. i tried with 9, 5, and 3 seconds and it works... the selector made a difference. but 3 seconds is too much and would be better if it could perform faster – Victor Ferreira Mar 23 '15 at 05:14
  • Yup, works fine in my browser set to 500. :) Try putting return false before the close of the function and see if it still bounces back down after the alert. – Rufus Mar 23 '15 at 05:20
  • ill give it a try tonight – Victor Ferreira Mar 23 '15 at 13:06
1

Another potential solution:

window.setTimeout(function() {
    window.scrollTo(0,0);
}, 0);

I did have intermittent problems with the above code after refreshing multiple times, until I removed the reference to the Google-hosted jQuery library. It could just be a measure to mitigate abuse from constant refreshing.

There are a bunch of good suggestions here: The same old issue, .scrollTop(0) not working in Chrome & Safari

Community
  • 1
  • 1
Doug WB
  • 340
  • 6
  • 14
0
Try these solution. I hope this will be helpful

$(document).scroll(function() {
        if ($(this).scrollTop() > 100) {

               if(window.innerWidth <= 768){
                        $("html, body").css({ 
                        "position" : 'fixed',
                        "top" : 0 , "margin-left" : 566});
               }else{

                    $("html, body").css({ 
                    "position" : 'fixed',
                    "top" : 0 , "margin-left" : 721});
               }
        } else {
            $("html, body").css({ "position" : 'relative', "margin-left" : 0});
        }
    })
Priyal Shah
  • 1
  • 3
  • You may consider adding a little bit of explanation of your code parts that make OP's problem solve. It will be useful for all future readers – techspider Jun 14 '16 at 14:27
0

In jQuery:

Just Add this line in the beginning of your document load (Assuming you have jQuery framework parsed on your HTML page): 

$(document).ready(function)() {

  $(document.body).animate({scrollTop: '0px'}, 1000);// 1sec animation scroll up
  //Your rest of the code goes below -

});
Shaze
  • 792
  • 1
  • 9
  • 14