A href pointed to nowhere added # to url

Question

I have a href which pointed to #

<a href="#" id="bla" >Bla<a>

I have onclick function which displaying popup on click on that a href.

function doingClick()
{
   //display popup
   return false;
}

But after click symbol # every time added to the url in browser.

So for example if url was like that before I click on my link http://mywebsite.com

But after click on a href the url looking like that: http://mywebsite.com#

Is there any way to avoid such behavior?

Did you try not adding "href" attribute at all? – Bashir Magomedov Aug 18 '11 at 08:15 — Bashir Magomedov, Aug 18 '11 at 08:15

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

16

To avoid this try adding return false;

<a href="#" onclick="doingClick(); return false;">Link</a>

You could also use void(0)

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

There's a popular question related to this (small religious war!) at Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

edited May 23 '17 at 12:34

Community

1
1

answered Aug 18 '11 at 08:15

Peter Kelly

14,253
6
54
63

This is my preferred option. I almost feel guilty not telling the user that the link they're about to click uses Javascript, so I often use `javascript:void(0)` - having said that, you might want to put a real link in the `href` and change it to `javascript:void(0)` using Javascript, so that users without JS still go somewhere. Just my 0.02 – Nils Luxton Aug 18 '11 at 08:20

Oskar Sjöberg · Answer 2 · 2017-09-25T09:49:07.243

4

While there are other valid solutions, I personally prefer this shorter solution.

<a href="javascript:;">Link</a>

Another benefit is that this solution does not scroll to the top of the window.

edited Sep 25 '17 at 09:49

answered May 05 '17 at 12:48

Oskar Sjöberg

2,728
27
31

Rolice · Answer 3 · 2014-08-07T21:40:55.153

4

<a href="#" id="bla" onclick="return doingClick()">Link</a>

Do not forget to return the return of your function. Otherwise you will just call it without suspending the subsequent events.

edited Aug 07 '14 at 21:40

answered Aug 18 '11 at 08:15

Rolice

3,063
2
24
32

score 3 · Answer 4 · answered Aug 18 '11 at 08:34

3

So i think the better way of doing this is to remove href from a element

<a id="bla" class="href" >Bla</a>

and than to make it looks like a href just add simple css class

.href 
{
    color: #2289b8; //color of the link
    cursor: pointer;
}

This idea comes to me when i looked in to source of SO add comment button

answered Aug 18 '11 at 08:34

Joper

8,019
21
53
80

I was adding the only to change the mouse arrow to pointer so cursor: pointer; is great to use on :hover image – Tarik Sep 19 '16 at 20:16

score 2 · Answer 5 · answered Aug 18 '11 at 08:16

2

Instead of adding a href, you could add a style="cursor:pointer;" this has the same effect of displaying it like a hyperlink, without the in-page anchor effect.

<a id="bla" onclick="return doingClick()" style="cursor:pointer;">Link</a>

answered Aug 18 '11 at 08:16

Joachim VR

2,320
1
15
24

score 1 · Answer 6 · answered Aug 18 '11 at 08:18

The url is not pointed to nowhere. The URL is a relative URL to # in other words the URL resolves to <current_url># which in this case is http://mywebsite.com#.

To avoid this behaviour, you have to change the URL.

If you have a onclick-handler that returns false, then that should prevent the link being active :

<a href="#" onclick="return doingClick();">link</a>

You can also use javascript:void(0) as the link href.

In either case, be mindful of the decreased accessibility of your site when you use javascript to access some parts of it. Those users that have javascript disabled, doesn't have javascript enabled browsers or use a screenreader or other accessibilty tools may not be able to use the site.

score 1 · Answer 7 · answered Aug 18 '11 at 08:19

If you don't get better answer, you could make nasty ugly workaround by placing script tag very early on page (on the beginning of body or in head) with following javascript:

if(document.location.href[document.location.href.length-1]=='#'){
    document.location.href = document.location.href.substring(0, document.location.href.length-2)
}

I DO NOT RECOMMEND you to do this as will cause double requests to server when # is in url, but it is here if you have to.

score 0 · Answer 8 · answered Aug 18 '11 at 08:17

0

The # is used for linking the element ID's, and will always be added to your URL when used in "empty" hrefs. What you could do, if it REALLY annoys you, is to remove it from location.href in your doingClick function

answered Aug 18 '11 at 08:17

Thor Jacobsen

8,621
2
27
26

That's true, just thourght I'd done something clever - but I checked, and I hadn't :( – Thor Jacobsen Aug 18 '11 at 13:50

score 0 · Answer 9 · answered Aug 18 '11 at 08:17

0

A simple workaround would be set the href empty:

<a href="" id="bla" onClick="alert('Hi');">Bla<a>

Which still works.

answered Aug 18 '11 at 08:17

Devator

3,686
4
33
52

score 0 · Answer 10 · answered May 27 '22 at 04:17

0

If you want to keep the "events" that happens in href="#"

You can simply leave it empty: href=""

answered May 27 '22 at 04:17

Liban

101
1
2

A href pointed to nowhere added # to url

10 Answers10