How can I create an empty HTML anchor so the page doesn't "jump up" when I click it?

Viewed 55639

I'm working on some JQuery to hide/show some content when I click a link. I can create something like:

<a href="#" onclick="jquery_stuff" />

But if I click that link while I'm scrolled down on a page, it will jump back up to the top of the page.

If I do something like:

<a href="" onclick="jquery_stuff" />

The page will reload, which rids the page of all the changes that javascript has made.

Something like this:

<a onclick="jquery_stuff" />

Will give me the desired effect, but it no longer shows up as a link. Is there some way to specify an empty anchor so I can assign a javascript handler to the onclick event, without changing anything on the page or moving the scrollbar?

11 Answers

Put a "return false;" on the second option:

<a href="" onclick="jquery_stuff; return false;" />

You need to return false; after the jquery_stuff:

<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />

This will cancel the default action.

You can put simply as like below:

<a href="javascript:;" onclick="jquery_stuff">
<a href="javascript:;" onclick="jquery">link</a>

href requires something in there if you want it to not pop up errors in validators for html. The javascript:; is a good place holder.

If you really want to use the #:

<a href="#me" name="me" onclick="jquery">link</a>

Be careful with the return false;, it halts default behaviours of whatever you are doing.

Also if your js is like a submit you may run into problems in internet explorer.

<a href="javascript:// some helpful comment " onclick="jquery_stuff" />

I usually use a <span> and style it to look like a link when I need to accomplish something like this.

Related