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

Question

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?

Stop putting your event handlers in HTML, and stop using anchor tags that don't serve anchor semantic purposes. Use a button and add the click handler in your Javascript. Example: HTML `` and JavaScript `$('#jquery_stuff').click(jquery_stuff);`. You can use CSS to style the button to look like a link, by removing padding, borders, margin and background-color, then adding your link styles (eg. color and text-decoration). — eyelidlessness, Oct 19 '10 at 17:40
@eyelidlessness you should add it as an answer because that's the only correct one. — albertjan, Nov 22 '11 at 08:38

score 79 · Accepted Answer · answered Jan 29 '09 at 20:09

79

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

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

answered Jan 29 '09 at 20:09

Otávio Décio

73,752
17
161
228

1

Completely unnecessary. Just make href="javascript:code stuff". It'll never jump anywhere. – Robert C. Barth Jan 30 '09 at 05:53
11

"return false;" is the correct way to do it. A javascript: URL can still replace the page if it returns a non-null object, and gives an ugly JavaScript error on functions like open-in-new-tab. – bobince Feb 01 '09 at 03:51
2

A (possible) problem with href="javascript:code stuff" is that then the user then sees the contents of the javascript in the status bar. Kinda undesirable IMHO. – nedned Oct 06 '10 at 10:11
@humble coffee i think it adds some transparency for the user, personally i'd like to know what a link does before i click it. – Sam Oct 19 '10 at 17:40
3

@RobertC.Barth: Your comment was completely unnecessary, suggesting that your alternative was better, which it isn't. Nobody in their right mind codes with `javascript:` links anymore. The correct thing to do when you don't want the default behavior (jump to the top) is to return false from the handler @Sam: displaying the name of a function is transparency to the user? Are all your users geeks? – Ruan Mendes Oct 20 '11 at 00:09
See @Chris answer below – Dan Eastwell Feb 26 '14 at 14:22

score 24 · Answer 2 · answered Jan 29 '09 at 20:09

24

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.

answered Jan 29 '09 at 20:09

Greg

316,276
54
369
333

4

I like the idea of providing a target for the non-javascript users. It would be especially useful if the target page did something similar to what the javascript would be doing... – rmeador Jan 29 '09 at 20:18
3

Depending on what the JS is doing, this is considered the most accessible for not JS users. +1 – cdeszaq Jan 29 '09 at 20:27

score 24 · Answer 3 · edited Nov 13 '10 at 04:40

24

You can put simply as like below:

<a href="javascript:;" onclick="jquery_stuff">

edited Nov 13 '10 at 04:40

sth

222,467
53
283
367

answered Jan 31 '09 at 06:03

Shiva Srikanth Thummidi

2,898
4
27
36

2

this one is much simpler then others – Furkat U. Jun 28 '13 at 12:26

nates · Answer 4 · 2013-01-21T20:03:59.587

19

jQuery has a function built in for this called preventDefault which can be found here: http://api.jquery.com/event.preventDefault/

Here's their example:

<script>
$("a").click(function(event) {
    event.preventDefault();
});
</script>

You can also build the link like this:

<a href="javascript:void(0)" onclick="myJsFunc();">Link</a>

edited Jan 21 '13 at 20:03

answered Apr 28 '12 at 14:48

nates

8,312
5
32
28

1

link This is the only really correct and generic way in that it works regardless of using jQuery or anything else (in the onclick part). – cseelus May 20 '13 at 19:05

score 6 · Answer 5 · edited Dec 06 '12 at 08:56

Check eyelidlessness' comment (use a button, not an anchor). Was just about to post the same advice. An anchor that doesn't link to a resource and merely executes a script should be implemented as a button.

Stop putting your event handlers in HTML, and stop using anchor tags that don't serve anchor semantic purposes. Use a button and add the click handler in your Javascript. Example: HTML <button id="jquery_stuff">Label</button> and JavaScript $('#jquery_stuff').click(jquery_stuff);. You can use CSS to style the button to look like a link, by removing padding, borders, margin and background-color, then adding your link styles (eg. color and text-decoration). – eyelidlessness Oct 19 '10 at 17:40

score 4 · Answer 6 · edited Nov 13 '10 at 04:39

<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.

score 0 · Answer 7 · answered Jan 29 '09 at 20:09

0

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

answered Jan 29 '09 at 20:09

Diodeus - James MacFarlane

112,730
33
157
176

score -1 · Answer 8 · answered Sep 09 '13 at 13:28

  <a href="#" class="falseLinks">Link1</a>
  <a href="#" class="falseLinks">Link2</a>

etc..

JQUERY:

  $(function() {
    $("a.falseLinks").click(function() {
      // ...other stuff you want to do when links is clicked

      // This is the same as putting onclick="return false;" in HTML
     return false;
    })
  });

@eyelidlessness was a bit douchy in the way he said it but he was right. This is the cleanest way to do it. Why use jQuery if you're then gonna go back to vanilla Javascript for stuff jQuery does easier and cleaner?

score -1 · Answer 9 · answered Feb 01 '09 at 05:18

-1

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

answered Feb 01 '09 at 05:18

Matthew

7,605
7
39
39

4

I'm quite sure this makes the web site inaccessible with a keyboard, because the onclick will not fire when you press Enter, even though you have made the span selectable by adding a tabindex to it. This is important to test, if you are developing a public web site that needs to follow the WCAG guidelines. – Jan Aagaard Jul 01 '09 at 08:05
1

While this is true you're also creating something that isn't strictly a link in HTML sense. So it shouldn't always be treated as one. – Eirinn Jan 18 '12 at 10:20

score -2 · Answer 10 · answered Oct 19 '10 at 17:36

-2

Usually I do:

<a style="cursor:pointer;" onclick="whatever();">Whatever</a>

answered Oct 19 '10 at 17:36

Sarun

7

1

It will, but it won't be a link, won't be styled as a link, and won't be keyboard accessible. – Quentin Apr 05 '11 at 14:09

Mori · Answer 11 · 2022-03-02T07:42:12.043

-4

I would use a <button> element and plain JavaScript to achieve what you are after. If you insist, however, here's an alternative approach to the accepted answer:

<a href="#nowhere" onclick="console.log('Hello, world!');">This link goes nowhere because the target doesn't exist.</a>

edited Mar 02 '22 at 07:42

answered Dec 24 '11 at 15:51

Mori

8,137
19
63
91

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

11 Answers11

Linked