How can I prevent a click on a '#' link from jumping to top of page?

Question

I'm currently using <a> tags with jQuery to initiate things like click events, etc.

An example of what I'm doing is: <a href="#" class="someclass">Text</a>.

But I dislike how the '#' makes the page jump to the top of the page. What can I do instead?

Answer 1

So this is old but... just in case someone finds this in a search.

Just use "#/" instead of "#" and the page won't jump.

Answer 2

In jQuery, when you handle the click event, return false to stop the link from responding the usual way prevent the default action, which is to visit the href attribute, from taking place (per PoweRoy's comment and Erik's answer):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Answer 3

you can even write it just like this:

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

im not sure its a better way but it is a way :)

Answer 4

Solution #1: (plain)

<a href="#!" class="someclass">Text</a>

---

Solution #2: (needed javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

---

Solution #3: (needed jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Answer 5

You can use event.preventDefault() to avoid this. Read more here: http://api.jquery.com/event.preventDefault/.

Answer 6

Just use <input type="button" /> instead of <a> and use CSS to style it to look like a link if you wish.

Buttons are made specifically for clicking, and they don't need any href attributes.

The best way is to use onload action to create the button and append it where you need via javascript, so with javascript disabled, they will not show at all and do not confuse the user.

When you use href="#" you get tons of different links pointing to the same location, which won't work when the agent does not support JavaScript.

Answer 7

If you want to use a anchor you can use http://api.jquery.com/event.preventDefault/ like the other answers suggested.

You can also use any other element like a span and attach the click event to that.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Answer 8

$('a[href="#"]').click(function(e) {e.preventDefault(); });

Answer 9

You can use #0 as href, since 0 isn't allowed as an id, the page won't jump.

<a href="#0" class="someclass">Text</a>

Answer 10

There are 4 similar ways to prevent the page from jumping to the top without any JavaScript:

Option 1:

<a href="#0">Link</a>

Option 2:

<a href="#!">Link</a>

Option 3:

<a href="#/">Link</a>

Option 4 (Not recommended):

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

But it's better to use event.preventDefault() if you are handing the click event in jQuery.

Answer 11

Links with href="#" should almost always be replaced with a button element:

<button class="someclass">Text</button>

Using links with href="#" is also an accessibility concern as these links will be visible to screen readers, which will read out "Link - Text" but if the user clicks it won't go anywhere.

Answer 12

If the element doesn't have a meaningful href value, then it isn't really a link, so why not use some other element instead?

As suggested by Neothor, a span is just as appropriate and, if styled correctly, will be visibly obvious as an item that can be clicked on. You could even attach an hover event, to make the elemnt 'light up' as the user's mouse moves over it.

However, having said this, you may want to rethink the design of your site so that it functions without javascript, but is enhanced by javascript when it is available.

Answer 13

Just use

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

Answer 14

You could just pass an anchor tag without an href property, and use jQuery to do the required action:

<a class="foo">bar</a>

Answer 15

The #/ trick works, but adds a history event to the browser. So, clicking back doesn't work as the user may want/expect it to.

$('body').on('click', 'a[href="#"]', function(e) {e.preventDefault() }); is the way I went, as it works for already existing content, and any elements added to the DOM after load.

Specifically, I needed to do this in a bootstrap dropdown-menu inside of a .btn-group(Reference), so I did:

$('body').on('click', '.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

This way it was targeted, and didn't affect anything thing else on the page.

Answer 16

I have used:

<a href="javascript://nop/" class="someClass">Text</a>

Answer 17

To prevent the page from jumping, you need to call e.stopPropagation(); after calling e.preventDefault();:

stopPropagation prevents the event from going up the DOM tree. More info here: https://api.jquery.com/event.stoppropagation/

Answer 18

I've always used:

<a href="#?">Some text</a>

when trying to prevent the page jump. Not sure if this is the best, but it seems to have been working well for years.

Answer 19

You can also return false after processing your jquery.

Eg.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Answer 20

I use something like this:

<a href="#null" class="someclass">Text</a>

Answer 21

If you want to migrate to an Anchor Section on the same page without page jumping up use:

Just use "#/" instead of "#" e.g

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Answer 22

Adding something after # sets the focus of page to the element with that ID. Simplest solution is to use #/ even if you are using jQuery. However if you are handling the event in jQuery, event.preventDefault() is the way to go.

Answer 23

The <a href="#!">Link</a> and <a href="#/">Link</a> does not work if one has to click on the same input more than once.. it only takes in 1 event click for each on multiple inputs.

still the best way to go is with <a href="#">Link</a>

then,

event.preventDefault();

Answer 24

The simplest one for me was to do this.

<a href="#" onclick="return false;">Some text</a>

The reason for using JS is that most modern sites rely on it.

Answer 25

If you don't have a semantic reason to use an anchor element- such as seems to be the case here where you (if I understand correctly) don't want to link to anything- then you should check to see if there is a more semantically appropriate element. Perhaps that might be a button element.

---

If you insist on using an anchor element and actually just don't want there to be an href attribute at all,... just don't add one. See also: Is an anchor tag without the href attribute safe?. It's valid in HTML5 to have an anchor tag with no href. See https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element, which states:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

---

If you insist on putting # as the href, you can prevent scrolling to the top of the page with Event.prototype.preventDefault in an event listener, which you can add with EventTarget.prototype.addEventlListener or jQuery's .click() method. If you have issues with needing to get the event listener to be called earlier than other ones which are already registered, then you can try specifying you listener to listen for the event during the capturing phase with the useCapture (third) parameter, or the capture field if you use the options object signature of addEventListner.

$('<your selector goes here>').click(function(ev) {
    ev.preventDefault();
});

The reason why this works and the reason why the scroll-to-top happens in the first place is because that's what the HTML spec specifies is supposed to happen. See https://html.spec.whatwg.org/multipage/browsing-the-web.html#scrolling-to-a-fragment, which states:

For an HTML document document, the following processing model must be followed to determine its indicated part:

1. Let fragment be document's URL's fragment.

2. If fragment is the empty string, then return the special value top of the document.

[...]

Bonus info: If you read on, you'll also see that if you set the href to #top, that is also specified to cause scrolling to the top to happen.