HTML anchor link with no scroll or jump

Question

I have various links which all have unique id's that are "pseudo-anchors." I want them to affect the url hash value and the click magic is all handled by some mootools code. However, when I click on the links they scroll to themselves (or to the top in one case). I don't want to scroll anywhere, but also need my javascript to execute and to have the hash value in the url update.

Simulated sample code:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

So if you were to click on the "button 1" link, the url could be http://example.com/foo.php#button1

Does anyone have any ideas for this? Simply having some javascript return void kills the scrolling but also kills my javascript (though I could probably work around that with an onclick) but more importantly, prevents the hash value in the url to change.

Answer 1

The whole point of an anchor link is to scroll a page to a particular point. So if you don't want that to happen, you need to attach an onclick handler and return false. Even just adding it as an attribute should work:

<a href="#button1" id="button1" onclick="return false">button 1</a>

A side of effect of the above is that the URL itself won't change, since returning false will cancel the event. So since you want the URL to actually change, you can set the window.location.hash variable to the value that you want (that is the only property of the URL that you can change without the browser forcing a reload). You can probably attach an event handler and call something like window.location.hash = this.id though I'm not sure how mootools handles events.

(Also you need all of the IDs to be unique)

Answer 2

You can use the code below to avoid scrolling:

<a href="javascript:void(0);">linktxt</a>

Answer 3

I'm probably missing something, but why not just give them different IDs?

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

Or whatever convention you'd prefer.

Answer 4

Also, preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 5

I found the solution. Here I save an old location from calling href and restore it after scrolling

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

and in body of page

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

Thanks to sitepoint

Answer 6

An easier way would probably be to add it as a GET. That is, http://example.com/foo.php?q=#button1 instead of http://example.com/foo.php#button1

This won't have any effect on how the page is displayed (unless you want it to), and most scripting languages already have tools in place to easily (and safely) read the data.

Answer 7

Well here we are 7 years after this answer was published and I found a different way to make it work: just point the window.location.hash to a non-existent anchor! It doesn't work for <a>s but works perfectly in <div>s.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

Worked fine in Chrome 56, Firefox 52 and Edge (IE?) 38. Another good point is that this doesn't produce any console errors or warnings.

Hope it helps somebody besides me.

Answer 8

There is a solution without any JavaScript at all:

<a href="#!">I will not jump to the top</a>

Answer 9

Use

<a href="#button1" id="button1" onclick="setHash(this.id)">button 1</a>

where

function setHash(hash) {
            event.preventDefault();        
            history.pushState(null, null, "#"+hash);
}

event.preventDefault() stops browser from what it normally would do on clicking, and history.pushState adds to the sessions history stack.

For further discussion, see here and here