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

Also, preventDefault

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