Force page scroll position to top at page refresh in HTML

Question

I am building a website which I am publishing with divs  When I refresh the page after it was scrolled to position X  then the page is loaded with the scroll position as X   How can I force the page to be scrolled to the top on page refresh    What I can think of is of some JS or jQuery run as onLoad   function of the page to SET the pages scroll to top  But I don t know how I could do that  A better option would be if there is some property or something to have the page loaded with its scroll position as default  i e  at the top  which will be kind of like page load  instead of page refresh

User · Answer

lt script gt  location hash    location hash    location hash         lt  script gt    Put the above script in  lt head gt  tag of your html  Not sure how single page apps behave  But sure works like charm in regular pages

User · Answer

I found that these CSS styles force the page to always scroll to top on reload refresh  html       height  100       overflow  hidden      width  100      body       height  100       overflow-x  hidden      overflow-y  auto      width  100

User · Answer

You can use location replace instead of location reload  location replace location href    This way page will reload with scroll on top

User · Answer

Again  best answer is   window onbeforeunload   function          window scrollTo 0 0         thats for non-jQuery  look up if you are searching for the JQ method   EDIT  a little mistake its  onbeforunload     Chrome and others browsers  remember  the last scroll position befor unloading  so if you set the value to 0 0 just before the unload of your page they will remember 0 0 and won t scroll back to where the scrollbar was

User · Answer

Check the jQuery  scrollTop   function here  It would look something like    document  load   scrollTop 0

User · Answer

You can also try     document  ready function          window  scrollTop 0         If you want to scroll at x position than you can change the value of 0 to x

User · Answer

For a simple plain JavaScript implementation    x000D   x000D  window onbeforeunload   function      x000D    window scrollTo 0  0   x000D    x000D   x000D   x000D

User · Answer

document  ready function          window  scrollTop 0         did not work for me as google chrome would just scroll back down after the page finished loading  What I used was     document  ready function         var url   window location href      console log url       if  url indexOf       lt  0             window location replace url               else           window location replace url                  This loads the page with a   at the end  So it will always load at the top

User · Answer

The answer here scrolling in   document  ready  doesn t work if there is a video in the page  In that case the page is scrolled after this event is fired  overriding our work   Best answer should be     window  on  beforeunload   function          window  scrollTop 0

User · Answer

To reset window scroll back to top    window  scrollTop 0  in the beforeunload event does the tricks  however  I tested in Chrome 80 it will go back to the old location after the reload   To prevent that  set the history scrollRestoration to  manual      Reset scroll top  history scrollRestoration    manual      window  on  beforeunload   function            window  scrollTop 0

User · Answer

The supercalifragilisticexpialidocious answer is   add this at the top of your js file or script tag  document documentElement scrollTop   0     For Chrome  Firefox  IE and Opera  document body scrollTop   0     For Safari

User · Answer

This is one of the best way to do so   x000D   x000D   lt script gt    window  on  beforeunload   function          body   hide        window  scrollTop 0        lt  script gt  x000D   x000D   x000D

User · Answer

The answer here does not works for safari  document ready is often fired too early   Ought to use the beforeunload event which prevent you form doing some setTimeout    window  on  beforeunload   function        window  scrollTop 0

User · Answer

Instead of location reload    simply use location href   location href  It will not scroll to the previous position as location reload   does   Note  This will not reload if there is any   in the URL

User · Answer

You can do it using the scrollTop method on DOM ready     document  ready function          this  scrollTop 0

[javascript] Force page scroll position to top at page refresh in HTML

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to pageload

Examples related to page-refresh