CODEWITHSUNDEEP
javascripthtml
Tom
Tom

Reputation:

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

Upvotes: 55

Views: 54715

Answers (13)

Jos&#233;
Jos&#233;

Reputation: 2302

href='#/' insted of href='#' works for me.

Upvotes: 0

Timothy Gonzalez
Timothy Gonzalez

Reputation: 760

Don't use an a tag. Use a span with text that looks like a link. I usually create a "clickable" css class styled like links for this.

.closeLink {
    color: #4e73df;
    text-decoration: underline;
    cursor: pointer;
}
<span onClick="yourFunction()" class="clickable closeLink">close</span>

Upvotes: 0

Kimliang Mich
Kimliang Mich

Reputation: 1

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

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

Upvotes: 0

Vilmar Pavesi
Vilmar Pavesi

Reputation: 61

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

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

Upvotes: 2

Vogon Jeltz
Vogon Jeltz

Reputation: 1315

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>

Upvotes: 6

Bassel Ahmed
Bassel Ahmed

Reputation: 43

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>

Upvotes: 0

Ballsacian1
Ballsacian1

Reputation: 17324

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;
}

Upvotes: 0

Gaff
Gaff

Reputation: 5657

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.

Upvotes: 51

No0dLz
No0dLz

Reputation: 51

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! :)

Upvotes: 5

tvanfosson
tvanfosson

Reputation: 532465

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...
});

Upvotes: 69

TryIt123
TryIt123

Reputation: 1

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>

Upvotes: -2

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146450

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>

Upvotes: 2

Martin
Martin

Reputation: 11041

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.

Upvotes: 2

Related Questions