'Href="#" Don't Scroll

I am pretty new to JS - so just wondering whether you know how to solve this problem.

Current I have in my code

<a href='#' class="closeLink">close</a>

Which runs some JS to close a box. The problem I have is that when the user clicks on the link - the href="#" takes the user to the top of page when this happens.

How to solve this so it doesn't do this ? i.e. I cant use someting like onclick="return false" as I imagine that will stop the JS from working ?

Thanks

javascripthtml


Solution 1:[1]

The easiest way to solve this problem is to just add another character after the pound symbol like this:

<a href='#a' class="closeLink">close</a>

Problem solved. Yes, it was that easy. Some may hate this answer, but they cannot deny that it works.

Just make sure you don't actually have a section assigned to "a" or it will go to that part of the page. (I don't see this as often as I use to, though) "#" by itself, by default, goes to the top of the page.

Solution 2:[2]

JavaScript version: 

myButton.onclick=function(e){
    e.preventDefault();
    // code
    return false;
}

jQuery version: 

$('.myButtonClass').click(function(e){
    e.preventDefault();
    // code
    return false;
});

This just do the job well! :)

Solution 3:[3]

One option available to you is not to use href = "#"but instead href = "javascript:;" this will allow you to run the onclick handler whilst not scrolling.

For Example

<a href="javascript:;" onclick="doSomething()">Do Something</a>

Solution 4:[4]

return false is the answer, but I usually do this instead:

$('.closeLink').click( function(event) {
      event.preventDefault();
      ...do the close action...
});

Stops the action from happening before you run your code.

Solution 5:[5]

Although it seems to be very popular, href='#' is not a magic keyword for JavaScript, it's just a regular link to an empty anchor and as such it's pretty pointless. You basically have two options:

  1. Implement an alternative for JavaScript-unaware user agents, use the href parameter to point to it and cancel the link with JavaScript. E.g.:

    <a href="close.php" onclick="close(); return false">

  2. When the noscript alternative is not available or relevant, you don't need a link at all:

    <span onclick="close(); return false">Close</span>

Solution 6:[6]

Like ROFLwTIME example, one easy way is put two ## in the href. It's not common, but worked for me.

  <a href='##' >close</a>

Solution 7:[7]

If your code is getting passed the eventObject you could use preventDefault(); returning false also helps.

mylink.onclick = function(e){
 e.preventDefault();
 // stuff
 return false;
}

Solution 8:[8]

Sorry for the late answer but nobody mentioned this. Just make it <a>Do Stuff</a> without any href and add the style cursor: pointer to the element. Then you can manage any click event with jquery as follows

$(document).ready(function(){
  $("#Element").click(function(){
     alert("Hello");
    //Do Stuff
  })
});
#Element {
  cursor: pointer;
}
#Element:hover {
  color: #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a id="Element">Do Stuff</a>

Solution 9:[9]

I like to use jQuery. That's so simple.

$('a').on('click',function(e){
 if($(this).attr('href')=='#')
  return e.preventDefault();
});

Solution 10:[10]

Wrap a div statement around a link, have the link return false, add the javascript functionality to the div on click...

<div onClick="javascript:close();">
    <a href="#" onclick="javascript:return false;">Close</a>
</div>

Related Questions