66

I have a page with some jQuery functions. The HTML on the page looks like so:

<a href="#" class="service">Open</a>

When I click the Open button a hidden panel slides out. The jQuery itself works great however when I click the button it also takes me to the top of the page.

Is this the defualt behavior and how do I prevent every href="#" from taking me to the top of the page.

Note: I could add id's and tell the href to direct to that ID. I do not want to do that for various reasons (including adding unnecessary code).

0

4 Answers 4

126
<a href="#!" class="service">Open</a>
17
  • 6
    I think this is an anchor syntax. Scroll to element with id="!" but element with id="!" does not exist in document and browser does not scroll. w3.org/TR/html4/struct/links.html#h-12.2.1
    – MyroslavN
    Commented Aug 15, 2016 at 9:11
  • 2
    WoW! Best Solution! Thanks a lot. I wish I could upvote it 10 times! Commented Sep 21, 2016 at 8:49
  • 8
    Hacking HTML since 1996. And still nuts and bolts to learn. Thanks Commented Jun 21, 2018 at 16:35
  • 3
    Results in issues using Code Sniffer (WCAG2AA Standard): No Item found with Id "!"
    – Aimal Khan
    Commented May 16, 2019 at 15:02
  • 1
    by far this hack is better than any JS solution,
    – Stalkium
    Commented Jan 5, 2021 at 0:02
74

In your event handler, add e.preventDefault(); (assuming e is the name of the variable holding the event):

$('.service').click(function(e) {
    e.preventDefault();
});
3
  • 1
    You may also need to use return false at the end of your code block to ignore the browser default of scrolling to the top of the page.
    – bafromca
    Commented Jun 26, 2014 at 16:56
  • 4
    @bafromca: Absolutely not. Calling preventDefault is sufficient; as its name implies, it prevents the default action (following the anchor and going to the top of the page) from occurring. return false does this too, and also does the equivalent of calling stopPropagation which, as the name suggests, stops the event from propagating up to parent elements; but if all you want to do is prevent the browser from scrolling to the top of the page, there is no need for return false.
    – icktoofay
    Commented Jun 27, 2014 at 3:43
  • Another solution for links that don't have a class like the OP - $('a[href="#"]').click(function(e) {e.preventDefault(); });
    – Grant
    Commented Aug 12, 2021 at 7:43
26
<a href="#" onclick="return false;" class="service">Open</a>

OR

$(document).ready(function()
{ 
   var a = $(".service");
   a.click(function()
   {

       return false;

   });
});

OR

$(document).ready(function()
{ 
   var a = $(".service");
   a.click(function(e)
   {

       e.preventDefault();

   });
});

OR

<a href="#" onclick="event.preventDefault();" class="service">Open</a>
2
  • the 4th solution helped me as I don't have access to the js script, thanks
    – FritzB
    Commented Feb 16, 2016 at 6:53
  • I also liked the inline solution :) Commented Feb 25, 2016 at 11:29
0
$('service').click(function() {
<your code>
return false;
});

return false overrides the standard behavior of the ‘a’ tag and stops the browser returning to the top of the page when clicked.

Not the answer you're looking for? Browse other questions tagged or ask your own question.