href=“#” Going to Top of Page - Prevent? [duplicat

Question

This question already has answers here:

How to prevent a click on a '#' link from jumping to top of page? (23 answers)

Closed 2 years ago.

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

Answer 1

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

Answer 2

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

$('.service').click(function(e) {
    e.preventDefault();
});

Answer 3

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

Answer 4

$('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.