Link to a different part of same page with Javascript

[toms ace]

Hey,
I currently have a link that links to a different part of the same page using <a href="#title"> which is defined using <a name="#title">. It all works fine but when clicked it adds #title to the end of the URL and when the user clicks the back button it goes back to when they clicked the link rather than actually going back a page which is very inconvenient for my site.

I have seen that on Facebook this has been done so I know there is a way, I just don't know how or what exactly to search on Google.

Any help much appreciated.
Thanks,
Tom.

[Taywin]

You may want to look at this forum link http://stackoverflow.com/questions/1586341/how-can-i-scroll-to-a-specific-location-on-the-page-using-jquery. It may answer what you want to do.

[Airshow]

Tom,

The following should work:

function hashNoHistory(link){
  var a = document.createElement("a");
  a.href = link.href;
  location.replace(a.href);
  return false;
}

<a href="#myAnchor" onclick="return hashNoHistory(this)">click me</a>
...
<a id="myAnchor">myAnchor</a>

However, Opera doesn't obey location.replace() under these circumstances. It's a known bug that they have failed to address for some time now. As far as I know the other major browsers work properly.

I understand there's a completely different approach to anchors in HTML 5 but I haven't had time to research it.

Airshow

[Airshow]

Second thoughts, the function can be simplified to :

function hashNoHistory(link){
  location.replace(link.href);
  return false;
}

Unfortunately, Opera still won't play ball.

Airshow

[toms ace]

Thanks for the help,

This works beautifully in stopping the history returning to the same page! Is there a way to stop the ugly "website.com/page#myAnchor" in the URL also?

Thanks alot,
Tom.

[Airshow]

Tom, yes indeed there is.

First, there's no need to set the whole url in the href, just the #hash part. The browser assumes the rest of the url to be the same as the current page, which is exactly what you want.

Next, a particularly elegant solution is to set a class on each link of this type then attach click handlers with jQuery. You can avoid jQuery but it makes for very concise code.

$(function(){
  $(".noHistory").click(function(){
    location.replace(this.href);
    return false;
  });
});

<a href="#myAnchor1" class="noHistory">click me</a><br/>
<a href="#myAnchor2" class="noHistory">click me</a><br/>
<a href="#myAnchor3" class="noHistory">click me</a><br/>

This will actually work with any url (same domain, different domain, whatever you want), not just anchors on the same page. In all cases, by setting class="noHistory" and attaching the click handler, the latest entry in the browser's History object will be replaced and the Back button will work as you want (except in Opera as already mentioned).

Airshow

[toms ace]

This is beautiful, got it working first time.

Thanks alot for all your help :)
Tom.