Clicking on an empty anchor link sends the user to the top of the page

Question

I have two empty anchor links <a href="#"> that are used to create tabs. Please take a look at my jsFiddle:

The problem is that the user goes to the very top of the page when going from tab to tab. I would use jQuery-UI's tabs, but I have the same HTML element for each tab, and think jQuery-UI's tabs force you to have different HTML elements in each tab.

I want to use these tabs further down my page, and making the user scroll down after every tab switch is not user-friendly. How do I fix this?

UPDATE: If I click on "Tab 1" to activate it, I shouldn't be able to hit the Tab key on my keyboard and Tab 2 is now highlighted.

You can fix this in the jquery functions as well.. but you haven't included any jquery in your question. — Scott, Aug 24 '16 at 00:08

score 2 · Answer 1 · answered Aug 24 '16 at 00:06

2

You can use href="#/". It should prevent this behavior from happening.

answered Aug 24 '16 at 00:06

Gefn

141
6

I'd like to know that too – Roko C. Buljan Aug 24 '16 at 00:10
It prevents the behavior from happening, but is a hack conceptually identical to using `href="#anyIDThatDoestExistOnThePage"`. A better approach would be to _prevent_ the anchor tag from trying to act as a hyperlink in the first place, rather than turning it into an _explicitly broken_ hyperlink – Hamms Aug 24 '16 at 00:12
@Hamms `/` is not a valid ID character so I don't think it's the *same* as like you described `href="#anyIDThatDoestExistOnThePage"` but rather a nice URI hack. – Roko C. Buljan Aug 24 '16 at 00:15
Well I'm curious to see in what using `href="javascript:void(0)"` is "less hacky" than this answer, since `void(0)` evaluates to undefined, so to me they're kind of equivalent. Actual question. – Gefn Aug 24 '16 at 00:47

score 1 · Answer 2 · edited May 23 '17 at 12:23

1

Use <a href="javascript:void(0)">.

https://jsfiddle.net/obybyvds/

Here's an explanation of why that works

edited May 23 '17 at 12:23

Community

1
1

answered Aug 24 '16 at 00:04

Rahat Ahmed

2,191
2
30
40

or just ``. In HTML5, anchor tags without attributes are valid. – Hamms Aug 24 '16 at 00:05
That's true but then the cursor doesn't change like anchor tags with a href. – Rahat Ahmed Aug 24 '16 at 00:06
2

Why not simply `javascript:;` – Roko C. Buljan Aug 24 '16 at 00:07
1

a simple `cursor: pointer;` CSS rule will make the cursor change. I encourage you to read [the explanation right below the one you linked](http://stackoverflow.com/a/1293130/1810460) – Hamms Aug 24 '16 at 00:09
That also works! `void(0)` is just a bit more explicit, and easier to read (in the sense that it might be hard to notice the `;`) – Rahat Ahmed Aug 24 '16 at 00:09

Roko C. Buljan · Answer 3 · 2016-08-24T01:03:43.353

You could set the href to javascript:;

<a href="javascript:;">Tab 1</a>

Or keep the href="#" and simply event.preventDefault() on click using this JavaScript:

[].forEach.call(document.querySelectorAll("[href='#']"), function(el) {
  el.addEventListener("click", function(e){
    e.preventDefault();
  }, false);
});

^jsFiddle

or in jQuery:

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

Clicking on an empty anchor link sends the user to the top of the page

3 Answers3