Change hash without reload in jQuery

Question

I have the following code      ul questions li a   click function event            tab   hide            this  attr  href    fadeIn  slow        event preventDefault        window location hash     this  attr  href          This simply fades a div in based on when you click but I want the page URL hash tag to change when you click so people can copy and bookmark it   At the moment this effectively reloads the page when the hash tag is change   Is it possible to change the hash tag and not reload the page to prevent the jumping effect

User · Accepted Answer

This works for me     ul questions li a   click function event        event preventDefault            tab   hide        window location hash   this hash          this  attr  href    fadeIn  slow          Check here http   jsbin com edicu for a demo with almost identical code

User · Answer

You can set your hash directly to URL too   window location hash    YourHash        The result   http   url YourHash

User · Answer

You could try catching the onload event  And stopping the propagation dependent on some flag   var changeHash   false      ul questions li a   click function event        var  this     this          tab   hide       you can improve the speed of this selector         this attr  href    fadeIn  slow        StopEvent event      notice I ve changed this     changeHash   true      window location hash    this attr  href           window  onload function event       if  changeHash           changeHash   false          StopEvent event            function StopEvent event       event preventDefault        event stopPropagation        if    browser msie            event originalEvent keyCode   0          event originalEvent cancelBubble   true          event originalEvent returnValue   false            Not tested  so can t say if it would work

User · Answer

The accepted answer didn t work for me as my page jumped slightly on click  messing up my scroll animation   I decided to update the entire URL using window history replaceState rather than using the window location hash method  Thus circumventing the hashChange event fired by the browser      Only fire when URL has anchor    a href       not  href         on  click   function event            Prevent default anchor handling  which causes the page-jumping      event preventDefault         if   location pathname replace              this pathname replace            amp  amp  location hostname    this hostname             var target     this hash           target   target length   target       name     this hash slice 1                  if   target length                        Smooth scrolling to anchor                html  body   animate                   scrollTop  target offset   top                1000                   Update URL             window history replaceState     document title  window location href replace location hash        this hash

User · Answer

You can simply assign it a new value as follows   window location hash

[jquery] Change hash without reload in jQuery

Examples related to jquery

Examples related to hash

Examples related to reload

Examples related to fragment-identifier

Examples related to window.location