how to make the page not reload after changing the hash?

Question

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button onclick="clickHash()">hash</button>
        <button onclick="clickCancel()">cancel</button>
        <div style="height: 2000px; width: 1000px; background: red;"></div>
        <button onclick="clickCancel()">cancel</button>
        <script>
            clickHash = function(){
                location.hash = "#test";
                window.scrollTo(0, 2000);
            }
            clickCancel = function(){
                location.hash = "";
            }
            handler = function() {
              console.log("hashchange fired");
            }
            window.onhashchange = handler;
        </script>
    </body>
</html>

What I expect by the code above is that when I click the hash button, change the hash and scroll the page to the bottom, and when I click the cancel button, remove the hash. However, when the hash is removed, the page will jump to the top. I guess it might be because the page get reload or refresh when the hash changed.

Does anyone know how to make the page not reload after changing the hash?

Here is the example.

And http://stackoverflow.com/questions/1489624/modifying-document-location-hash-without-page-scrolling — isherwood, Jul 31 '14 at 13:16
@isherwood thank you for your answer. I'll check whether it works for me. — kyno, Jul 31 '14 at 13:20
@kaspermoerch In my application, I use the hash to determine if a picture is visible. Also, I have to set a button to set hash empty, which means no picture shows. — kyno, Jul 31 '14 at 13:22

score 0 · Accepted Answer · answered Jul 31 '14 at 13:27

0

The page does not reload. You're setting a new hash "" which is equivalent to "top of the page" so the browser does what you tell him: jump to the top.

If you want to keep the postion you should recall scrollTo():

clickCancel = function(){
  location.hash = "";
  window.scrollTo(0, 2000);
}

answered Jul 31 '14 at 13:27

chm-software.com

351
2
10

"" which is equivalent to "top of the page" make sense. Thank you. – kyno Jul 31 '14 at 13:32

how to make the page not reload after changing the hash?

1 Answers1