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?

Answer 1

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.