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

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

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