How can I create an empty HTML anchor so that the page does not “jump up” when I click on it?

Question

I am working on some jQuery to hide / show some content when I click the link. I can create something like:

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

But if I click this link while I scroll on the page, it will return to the top of the page.

If I do something like:

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

The page will reload, which will copy the page of all changes made by javascript.

Something like that:

 <a onclick="jquery_stuff" /> 

It gives me the desired effect, but it no longer appears as a link. Is there a way to specify an empty anchor so that I can assign a javascript handler for the onclick event without changing anything on the page or moving the scroll bar?

Answer 1

Put "return false"; according to the second option:

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

Answer 2

You need to return false; after jquery_stuff :

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

This will cancel the default action.

Answer 3

You can simply ask as shown below:

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

Answer 4

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

Here is an example of them:

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

You can also create a link as follows:

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

Answer 5

Comments

Check eyelids "(use a button, not an anchor). I was ready to publish the same advice. An anchor that does not refer to a resource and just executes a script should be implemented as a button.

Stop putting event handlers in HTML and stop using anchor tags that don't serve as an anchor meaning. Use the button and add a 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 look like a link, removing indents, borders, margins and background-color, then add link styles (like color and text trim). - eyelidlessness Oct 19 '10 at 17:40

Answer 6

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

href requires something there if you want it to not display errors in html validators. javascript:; is a good owner of the place.

If you really want to use # :

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

Be careful with return false; It stops the default behavior in everything you do.

Also, if your js is similar to submit, you may run into problems in Internet Explorer.

Answer 7

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

Answer 8

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

Answer 9

  <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 little boring in the way he said it, but he was right. This is the cleanest way to do this. Why use jQuery if you are going to return to vanilla Javascript for things that jQuery makes easier and cleaner?

Answer 10

Usually I do:

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

Answer 11

How about this:

 <a href="#nogo" onclick="foo();">some text</a>