Can I create an html link to the current page without refreshing to the top?

Question

I have a javascript fade function that I implemented into a banner div so that when it is clicked, the current banner image is faded into another one. The html link tag calling the function is as follows:

<a href="#" onclick="fade('bannerDiv');">
    <div id="bannerDiv">
        <img src="banner_image.gif" />
    </div>
</a>

The problem is, the banner is located somewhat towards the middle of the page (middle between top and bottom, not left and right) and when I click on the banner to change the image, it brings me back to the top of the page. Is there a way I can fix this?

Fix as in not changing the location of the part of the page being viewed when the link is clicked to activate the javascript animation. — Simon Suh, Dec 01 '10 at 02:39

score 2 · Accepted Answer · answered Dec 01 '10 at 02:46

The proper way is to make the browser not evaluate the href parameter at all - javascript:void(0) and similar targets are an ugly hack.

You can simply return false in your onclick event:

<a href="#" onclick="fade('bannerDiv'); return false;">

It would be a good idea to put the actual link to the current file in the href so it doesn't cause any problems if people don't have JavaScript enabled. However, # is fine for that, too.

score 1 · Answer 2 · answered Dec 01 '10 at 02:40

Use javascript:void(0) instead of #.

<a href="javascript:void(0)" onclick="fade('bannerDiv');">
    <div id="bannerDiv">
        <img src="banner_image.gif" />
    </div>
</a>

Clicking on the link will execute the void function and the user will not be taken anywhere.

Can I create an html link to the current page without refreshing to the top?

2 Answers2