javascript anchor avoid scroll to top on click

Question

I created a function in javascript that i add to an anchor as such

javascript :

somefunction = function () {alert(\'foo\')}

html :

Answer 1

The trick is that your onclick returns the value of somefunction, so that if you make sure somefunction always return false, then the event will return false as well, and cancel the default behavior of the anchor.

So this should solve your problem:

somefunction = function () { alert('foo'); return false; }

But I should mention that when there is an error somewhere in somefunction, the rest of the javascript will not execute, and the browser will still follow the link to #. It is advisable, therefore, to use javascript:void(0) instead, as this will rid you of that problem.

Answer 2

I know that the question is asked for JavaScript, but if anyone would like to do it in jQuery then it is pretty simple.

You can give your a tag an id and reference it in jQuery to do a certain action.

All you need to do, - to avoid the scroll to top is to disable the default action of the a tag.

Code:

$( "#a-tag-id" ).click(function(e) {
        e.preventDefault();
        alert( "Hello World" );
    });

Answer 3

Return false from your onclick handler, e.g.:

<a href="#" onclick="somefunction(); return false;">anchor</a>

Answer 4

You need to make somefunction() return false, or you need to explicitly add return false to your onclick handler. For example:

<a href="#" onclick="somefunction(); return false;">anchor</a>

This will have the browser ignore the href portion of the link when someone clicks on it.

Answer 5

The onclick causes the page to resubmit, therefore scrolling to the top.

You need the onclick event to return a false in order to avoid the postback.

This can be done by changing your function to return a false:

somefunction = function () {alert('foo'); return false;}

Or to change the link and onClick event to do so:

<a href="javascript:void(0)" onclick="somefunction(); return false;">anchor</a>