I have the following code:

    $(&#39;ul.questions li a&#39;).click(function(event) {
		$(&#39;.tab&#39;).hide();
		$($(this).attr(&#39;href&#39;)).fadeIn(&#39;slow&#39;);
		event.preventDefault();
		window.location.hash = $(this).attr(&#39;href&#39;);
	});

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?

Change hash without reload in jQuery

How would I have a [JavaScript][1] action that may have some effects on the current page but would also change the URL in the browser so if the user hits reload or bookmark, then the new URL is used?  

It would also be nice if the back button would reload the original URL.

I am trying to record JavaScript state in the URL.

  [1]: http://en.wikipedia.org/wiki/JavaScript


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

Looking for a way to parse key pairs out of the hash/fragment of a URL into an object/associative array with JavaScript/JQuery

Parsing URL hash/fragment identifier with JavaScript

How can I check if a URL has changed in JavaScript? For example, websites like GitHub, which use AJAX, will append page information after a # symbol to create a unique URL without reloading the page. What is the best way to detect if this URL changes?

* Is the `onload` event called again?
* Is there an event handler for the URL?
* Or must the URL be checked every second to detect a change?

How to detect if URL has changed after hash in JavaScript

I have some jQuery/JavaScript code that I want to run only when there is a hash (`#`) anchor link in a URL. How can you check for this character using JavaScript? I need a simple catch-all test that would detect URLs like these:

  - `example.com/page.html#anchor`
  - `example.com/page.html#anotheranchor`

Basically something along the lines of:

    if (thereIsAHashInTheUrl) {        
        do this;
    } else {
        do this;
    }

If anyone could point me in the right direction, that would be much appreciated.

How can you check for a #hash in a URL using JavaScript?

When one wants to refer to some part of a webpage with the &quot;`http://example.com/#foo`&quot; method, should one use

    &lt;h1&gt;&lt;a name=&quot;foo&quot;/&gt;Foo Title&lt;/h1&gt;

or

    &lt;h1 id=&quot;foo&quot;&gt;Foo Title&lt;/h1&gt;

They both work, but are they equal, or do they have semantic differences?

Should I make HTML Anchors with &#39;name&#39; or &#39;id&#39;?

I&#39;ve just noticed that the long, convoluted Facebook URLs that we&#39;re used to now look like this:

`http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345`

As far as I can recall, earlier this year it was just a normal URL-fragment-like string (starting with `#`), without the exclamation mark. But now it&#39;s a shebang or hashbang (`#!`), which I&#39;ve previously only seen in shell scripts and Perl scripts.

The [new Twitter](http://blog.twitter.com/2010/09/better-twitter.html) URLs now also feature the `#!` symbols. A Twitter profile URL, for example, now looks like this:

`http://twitter.com/#!/BoltClock`

Does `#!` now play some special role in URLs, like for a certain Ajax framework or something since the new Facebook and Twitter interfaces are now largely Ajaxified?   
Would using this in my URLs benefit my Web application in any way?

What&#39;s the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

We&#39;ve got a few pages using ajax to load in content and there&#39;s a few occasions where we need to deep link into a page. Instead of having a link to &quot;Users&quot; and telling people to click &quot;settings&quot; it&#39;s helpful to be able to link people to *user.aspx#settings*

To allow people to provide us with correct links to sections (for tech support, etc.) I&#39;ve got it set up to automatically modify the hash in the URL whenever a button is clicked.  The only issue of course is that when this happens, it also scrolls the page to this element.

Is there a way to disable this?  Below is how I&#39;m doing this so far.

    $(function(){
        //This emulates a click on the correct button on page load
        if(document.location.hash){
         $(&quot;#buttons li a&quot;).removeClass(&#39;selected&#39;);
         s=$(document.location.hash).addClass(&#39;selected&#39;).attr(&quot;href&quot;).replace(&quot;javascript:&quot;,&quot;&quot;);
         eval(s);
        }
        
        //Click a button to change the hash
        $(&quot;#buttons li a&quot;).click(function(){
                $(&quot;#buttons li a&quot;).removeClass(&#39;selected&#39;);
                $(this).addClass(&#39;selected&#39;);
                document.location.hash=$(this).attr(&quot;id&quot;)
                //return false;
        });
    });

I had hoped the `return false;` would stop the page from scrolling - but it just makes the link not work at all. So that&#39;s just commented out for now so I can navigate.

Any ideas?

Modifying location.hash without page scrolling

It&#39;s well known that the URL fragment (the part after the `#`) is not sent to the server. 

I do wonder though how fragments work when a server redirect (via HTTP status 302 and `Location:` header) is involved.

My question is really two-fold:

1. If the original URL had a fragment (`/original.php#foo`), and a redirect is made to `/new.php`, does the fragment part of the original URL simply get lost? Or does it sometimes get applied to the new URL? &lt;br&gt;Will the new URL ever be `/new.php#foo` in this case?

2. Regardless of the original URL, if the server redirects to a new URL with a fragment (`/new.php#foo`), will the fragment get &quot;honored&quot;? Or does the server really have no business interfering with the fragment at all -- and will the browser therefore ignore it by simply going to `/new.php`??

URL Fragment and 302 redirects

I know on client side (javascript) you can use windows.location.hash but could not find anyway to access from the server side. I&#39;m using asp.net.

How to get Url Hash (#) from server side

I&#39;d like to get the value after a hash in the URL of the current page and then be able to apply this in a new function... eg.

The URL could be

    www.example.com/index.html#foo

And I would like to use this in conjunction with the following piece of code
    
    	
    
    $(&#39;ul#foo:first&#39;).show();

I&#39;m kinda assuming/hoping there is some way of grabbing this, and turning it into a variable that I can then use in the second piece of code.


Getting URL hash location, and using it in jQuery

I am using Ajax and hash for navigation. 

Is there a way to check if the `window.location.hash` changed like this?

http://example.com/blah**#123** to http://example.com/blah**#456**

It works if I check it when the document loads.

But if I have #hash based navigation it doesn&#39;t work when I press the back button on the browser (so I jump from blah#456 to blah#123). 

It shows inside the address box, but I can&#39;t catch it with JavaScript.


How can I detect changes in location hash?

I&#39;m afraid it might be &lt;a href=&quot;https://stackoverflow.com/questions/1263509/potential-problems-setting-window-location-hash#comment1098554_1265461&quot;&gt;impossible&lt;/a&gt; but is there a way to change the hash value of a URL &lt;strong&gt;without leaving an entry in the browser&#39;s history&lt;/strong&gt; and &lt;strong&gt;without reloading&lt;/strong&gt;? Or do the equivalent?

As far as specifics go, I was developing some basic hash navigation along the lines of:

    //hash nav -- works with js-tabs
	var getHash = window.location.hash;
	var hashPref = &quot;tab-&quot;;
	function useHash(newHash) {
		//set js-tab according to hash
		newHash = newHash.replace(&#39;#&#39;+hashPref, &#39;&#39;);
		$(&quot;#tabs li a[href=&#39;&quot;+ newHash +&quot;&#39;]&quot;).click();
	}
	function setHash(newHash) {
		//set hash according to js-tab
		window.location.hash = hashPref + newHash;

		//THIS IS WHERE I would like to REPLACE the location.hash
		//without a history entry

	}
		// ... a lot of irrelavent tabs js and then....

		//make tabs work
		$(&quot;#tabs.js-tabs a&quot;).live(&quot;click&quot;, function() {
			var showMe = $(this).attr(&quot;href&quot;);
			$(showMe).show();
			setHash(showMe);
			return false;
		});
		//hash nav on ready .. if hash exists, execute
		if ( getHash ){
			useHash(getHash);
		}

Using jQuery, obviously. The idea is that &lt;em&gt;in this specific instance&lt;/em&gt; 1) making the user go back over every tab change could effectively &#39;break the back button&#39; by piling up needless references, and 2) not retaining which tab they&#39;re &lt;em&gt;currently on&lt;/em&gt; if they hit refresh is an annoyance.

Can you use hash navigation without affecting history?

How can I write the Javascript callback code that will be executed on any changes in the URL fragment identifier (anchor)?

For example from `http://example.com#a` to `http://example.com#b`

Handle URL fragment identifier (anchor) change event in Javascript

I&#39;m using the fragment identifier to create a permalink for AJAX events in my web app [similar to this guy][1].  Something like:

    http://www.myapp.com/calendar#filter:year/2010/month/5

I&#39;ve done quite a bit of searching but can&#39;t find a list of valid characters for the fragment idenitifer.  The [W3C spec][2] doesn&#39;t offer anything.

Do I need to encode the characters the same as the URL in has in general?

There doesn&#39;t seem to be any good information on this anywhere.

  [1]: https://stackoverflow.com/questions/2139539/url-fragment-identifier-simplify-state-handling-javascript
  [2]: http://www.w3.org/TR/xhtml1/#C_8

List of valid characters for the fragment identifier in an URL?

I have the following problem:
For example I have route like this:

    routes.Add(new Route(&quot;forums/thread/{threadOid}/last&quot;, new MvcRouteHandler())
               Defaults = new RouteValueDictionary(
                 new { controller = &quot;Thread&quot;, action =&quot;ShowThreadLastPostPage&quot;}),
            Constraints = new RouteValueDictionary(new { threadOid = @&quot;^\d+$&quot; })
        }
    );

    
Is there a way using RedirectToAction method navigate to the URL like this:

&gt; `forums/thread/{threadOid}/last#postOid`

ASP.Net MVC RedirectToAction with anchor

Is it possible to remove the hash from `window.location` without causing the page to jump-scroll to the top? I need to be able to modify the hash without causing any jumps.

I have this:

    $(&#39;&lt;a href=&quot;#123&quot;&gt;&#39;).text(&#39;link&#39;).click(function(e) {
      e.preventDefault();
      window.location.hash = this.hash;
    }).appendTo(&#39;body&#39;);
    
    $(&#39;&lt;a href=&quot;#&quot;&gt;&#39;).text(&#39;unlink&#39;).click(function(e) {
      e.preventDefault();
      window.location.hash = &#39;&#39;;
    }).appendTo(&#39;body&#39;);

See live example here: http://jsbin.com/asobi

When the user clicks &#39;**link**&#39; the hash tag is modified without any page jumps, so that&#39;s working fine.

But when the user clicks &#39;**unlink**&#39; the has tag is removed and the page scroll-jumps to the top. I need to remove the hash without this side-effect.

How can I remove the location hash without causing the page to scroll?  

I have URL like: `http://example.com#something`, how do I remove `#something`, without causing the page to refresh?  

I attempted the following solution:

    window.location.hash = &#39;&#39;;

**However, this doesn&#39;t remove the hash symbol `#` from the URL.**

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

I just set up my new homepage at [http://ritter.vg](http://ritter.vg).  I&#39;m using jQuery, but very minimally.  
It loads all the pages using AJAX - I have it set up to allow bookmarking by detecting the hash in the URL.  


     //general functions
     function getUrl(u)	{
          return u + &#39;.html&#39;;
     }
     function loadURL(u)	{
          $.get(getUrl(u), function(r){
                    $(&#39;#main&#39;).html(r);
               }
          );
     }
     //allows bookmarking
     var hash = new String(document.location).indexOf(&quot;#&quot;);
     if(hash &gt; 0)
     {
          page = new String(document.location).substring(hash + 1);
          if(page.length &gt; 1)
  	        loadURL(page);
          else
	        loadURL(&#39;news&#39;);
     }
     else
          loadURL(&#39;news&#39;);

But I can&#39;t get the back and forward buttons to work.  

Is there a way to detect when the back button has been pressed (or detect when the hash changes) without using a setInterval loop?  When I tried those with .2 and 1 second timeouts, it pegged my CPU.

Detecting Back Button/Hash Change in URL

I am ajax-ifying the pagination in one of me projects and since I want the users to be able to bookmarks the current page, I am appending the page number via hash, say:

    onclick=&quot;callPage(2); window.location.hash=&#39;p=2&#39;; return false;&quot;

and thats on the ``hyperlink`` it works fine and everything, except, when the page number is 1, i dont want to ``URL`` to be ``/products#p=1``, I just want it to be ``/products``

I tried these variations:

1. `window.location.hash=&#39;&#39;` works but the url is now like `/products#` and I dont quite the hash there.
2. not using window.location.hash at all, but when the user comes back to page 1 from, say page 3, he is in page one, but url is still `/products#p=3` since I am not messing with the hash.
3. Google search on this led me to several minutes (about 15) of silly forums where the question was asked right, but answers were suggesting that the page jumps because the thread creator had a hash in href like `&lt;a href=&quot;#&quot;&gt;` and he should use `javascript:void(0)` instead. (had they never heard of Ajax?)

So finally, I decided to make this thread,  I found several similar threads here, but all the answers ls very similar to my second point.

so my big question still remains a question: How to kick the hash out of the URL and possibly out of the universe? (only for the first page!)

Remove hash from url

Go to http://www.facebook.com/facebook?v=wall, then click on the info tab. The content will be loaded, and the address bar now becomes http://www.facebook.com/facebook?v=info but the webpage didn&#39;t reload.

At first I think it is Ajax, but my question is, how do you change the address bar without reloading? I know I can change anchor (#wall) using JS but querystring (?v=wall), how?

All Fragment Identifier Solutions on Gang of Coders

Total of 21 Fragment Identifier Solutions