How can I create an empty HTML anchor so the page doesn't "jump up" when I click it?
JavascriptJqueryAnchorJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
Put a "return false;" on the second option:
<a href="" onclick="jquery_stuff; return false;" />
Solution 2 - Javascript
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.
Solution 3 - Javascript
You can put simply as like below:
<a href="javascript:;" onclick="jquery_stuff">
Solution 4 - Javascript
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>
Solution 5 - Javascript
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
Solution 6 - Javascript
<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.
Solution 7 - Javascript
<a href="javascript:// some helpful comment " onclick="jquery_stuff" />
Solution 8 - Javascript
I usually use a <span>
and style it to look like a link when I need to accomplish something like this.
Solution 9 - Javascript
<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?
Solution 10 - Javascript
Usually I do:
<a style="cursor:pointer;" onclick="whatever();">Whatever</a>
Solution 11 - Javascript
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>