[javascript] HTML anchor link - href and onclick both?

I want to author an anchor tag that executes some JavaScript and then proceeds to go wherever the href was taking it. Invoking a function that executes my JavaScript and then sets window.location or top.location to the href location doesn't work for me.

So, imagine I have an element with id "Foo" on the page. I want to author an anchor similar to:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

When this is clicked, I want to execute runMyFunction and then jump the page to #Foo (not cause a reload - using top.location would cause it to reload the page).

Suggestions? I am happy to use jQuery if it can help here...

If the link should only change the location if the function run is successful, then do onclick="return runMyFunction();" and in the function you would return true or false.

If you just want to run the function, and then let the anchor tag do its job, simply remove the return false statement.

As a side note, you should probably use an event handler instead, as inline JS isn't a very optimal way of doing things.

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

and

function runMyFunction() {
  //code
  return true;
}

This way you will have youf function executed AND you will follow the link AND you will follow the link exactly after your function was successfully run.

When doing a clean HTML Structure, you can use this.

//Jquery Code_x000D_
$('a#link_1').click(function(e){_x000D_
  e . preventDefault () ;_x000D_
  var a = e . target ;_x000D_
  window . open ( '_top' , a . getAttribute ('href') ) ;_x000D_
});_x000D_
_x000D_
//Normal Code_x000D_
element = document . getElementById ( 'link_1' ) ;_x000D_
element . onClick = function (e) {_x000D_
  e . preventDefault () ;_x000D_
  _x000D_
  window . open ( '_top' , element . getAttribute ('href') ) ;_x000D_
} ;

<a href="#Foo" id="link_1">Do it!</a>