Removing hash from URL

Question

After removing hash from URL using window.location.hash=\'\' page getting reloaded in firefox.

EDIT

Example:

wwww

Answer 1

From https://developer.mozilla.org/en/DOM/window.location:

Examples

Whenever a property of the location object is modified, a document will be loaded using the URL as if window.location.assign() had been called with the modified URL.

This question I think addresses what you want using jQuery:

Change hash without reload in jQuery

Other related questions:

Change the URL in the browser without loading the new page using JavaScript

How to remove the hash from window.location with JavaScript without page refresh?

How can I change Firefox window.location.hash without creating a page reload?

Answer 2

We can remove/escape from appending the hash by returning false in click function.

<script>
    $('#add_user').click(function(){       
     //your custom function code here..
    return false;
});
</script>

<a id="add_user" href="#">Add Card</a>

Answer 3

Just in case somebody else is still looking for a solution to this. Try this when the page loads.

history.pushState("", document.title, window.location.pathname);

Answer 4

If I understand correctly,

<a href="#someElementID" id="myLinkName">Some Text</a>

clicking the above link in a browser normally results in an added hash in the address bar, like www.websitename.com#someElementID <- this is what you're looking to prevent, yes?

The solution I just tested which is working and DOES NOT refresh the page is:

event.preventDefault();

This works in a 'click()' event that involves anchor tags that link to elements' id's, such as in the anchor tag example above. In action, it would look like this in your 'click()' event:

<script>
    $('#myLinkName').click(function(){
        event.preventDefault();
        //the rest of the function is the same.
    });
</script>

Now, clicking on the same link leaves the address bar with the same URL www.websitename.com, WITHOUT the added hash from clicking the anchor.

Answer 5

you will find this example from w3schools very useful for your need plus it gives you elegant scrolling move compatable with all browsers, check below code :

  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area

      $('html, body').animate({
          scrollTop: $(hash).offset().top
       }, 800, function(){

      // Add hash (#) to URL when done scrolling (default click behavior)
      // obvously you will ignore this step because you want to remove the hash in first place - but just in case you want turn it on again

      window.location.hash = hash;
    });
   } // End if
  });
});