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

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

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