Link to a different part of same page with Javascript

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.

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

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

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.

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

This is beautiful, got it working first time.

Thanks alot for all your help :)
Tom.