href="#" Going to Top of Page - Prevent?

Question

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

MyroslavN · Answer 1 · 2018-01-10T09:55:46.433

126

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

edited Jan 10 '18 at 09:55

answered Mar 29 '16 at 17:33

MyroslavN

1,701
1
12
6

This works fine. But can you add some explanation as to why this works? – Polynomial Proton Aug 10 '16 at 18:37
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. https://www.w3.org/TR/html4/struct/links.html#h-12.2.1 – MyroslavN Aug 15 '16 at 09:11
2

WoW! Best Solution! Thanks a lot. I wish I could upvote it 10 times! – Segmentation Fault Sep 21 '16 at 08:49
By far the simplest solution - works without JQuery unlike the rest – Levi Fuller Sep 29 '16 at 22:24
I didn't knew that it would work like a charm and the great part is i do not have to add jquery extra code for it too. – Sorangwala Abbasali Jan 10 '17 at 12:05
THANKS a lot!! didn't know this exists – Sam Apr 27 '17 at 19:11
Fantastic! Thanks for the quick fix. – mrkarp Nov 08 '17 at 17:04
Wish everything could be as simple as this. – undefined Jan 15 '18 at 15:49
Doesn't work in Chrome Version 63.0.3239.108, any idea why? – valk Jan 16 '18 at 13:12
8

Hacking HTML since 1996. And still nuts and bolts to learn. Thanks – Juergen Schulze Jun 21 '18 at 16:35
Why is this not an accepted answer? – Sandeep Nov 14 '18 at 00:49
3

Results in issues using Code Sniffer (WCAG2AA Standard): No Item found with Id "!" – Aimal Khan May 16 '19 at 15:02
What are you?!! – Sajidur Rahman Jun 03 '19 at 06:07
1

by far this hack is better than any JS solution, – Stalkium Jan 05 '21 at 00:02
1

Best Answer by far. Simple and elegant with no JS overhead – Dave Nugent Apr 16 '21 at 01:06
1

You are the man! Best answer I've seen here. Haha – Ken Aug 07 '21 at 14:47
1

And after 20 years of HTML development ... – Extrange planet Jun 01 '23 at 18:23

score 74 · Accepted Answer · answered Oct 21 '12 at 23: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();
});

answered Oct 21 '12 at 23:02

icktoofay

126,289
21
250
231

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 Jun 26 '14 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 Jun 27 '14 at 03:43
Another solution for links that don't have a class like the OP - `$('a[href="#"]').click(function(e) {e.preventDefault(); });` – Grant Aug 12 '21 at 07:43

Ryan · Answer 3 · 2014-06-26T17:45:39.623

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>

edited Jun 26 '14 at 17:45

answered Oct 21 '12 at 23:06

Ryan

14,392
8
62
102

the 4th solution helped me as I don't have access to the js script, thanks – FritzB Feb 16 '16 at 06:53
I also liked the inline solution :) – Johnny Kutnowski Feb 25 '16 at 11:29

score 0 · Answer 4 · answered Nov 29 '13 at 06:53

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.

answered Nov 29 '13 at 06:53

Andreas

2,287
2
23
26

href="#" Going to Top of Page - Prevent?

4 Answers4

Linked