Href=“#” Don't Scroll

Question

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

Current I have in my code

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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

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

Answer 5

The usual way to do this is to return false from your javascript click handler. This will both prevent the event from bubbling up and cancel the normal action of the event. It's been my experience that this is typically the behavior you want.

jQuery example:

$('.closeLink').click( function() {
      ...do the close action...
      return false;
});

If you want to simply prevent the normal action you can, instead, simply use preventDefault.

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