views:

560

answers:

4

hello to all, I'm using jquery's slidetoggle to show/hide divs. the element that controls the sliding is a text link ( some text inside <\a>) which has href="#" so it will look like a link (underline, cursor change).

the problem is that when the link is clicked, in addition to the sliding effect, the page scrolls to top.

i tried replacing href="#" with href="" but that disables the div show/hide effect. i guess i could add to the tag Name="somename" and then set the href to href="#somename" but i would rather not use tricks like that.

why is href="#" scrolling the page to its top?

any ideas would be highly appreciated

+3  A: 

You need to add return false; to your click handler.
This will prevent the browser from executing the default action for the click.

SLaks
+2  A: 

Two options:

  1. Put return false; at the bottom of your click handler and the href wont be followed.
  2. Change the href to javascript:void(0);
thenduks
thank you all for your answers.i used return false and it works perfectlystackoverflow is amazing !
samoyed
A: 

Others have given you solutions. But to specifically answer your question, # refers to the current page. And since the interpretation of tags is to bring the top of the tag into view, clicking on a # tag scrolls you to the top of the current page.

slebetman
A: 

return false or event.preventDefault() are what you need in your click event handler to prevent the default action from occurring. An <a> element with a href of # will cause the browser viewport to jump to the top of the page as the default action

Russ Cam