link with href="#" scrolls page to top when used with jquery slidetoggle
href, jquery, scroll, slide, toggle
Solution
Several options:
- Put `return false;` at the bottom of your click handler and the href wont be followed.
- Change the href to `javascript:void(0);`
Call `preventDefault` on the event in your handler:
function( e ) {
e.preventDefault();
// your event handling code
}
Problem
Possible Duplicate: How do I stop a web page from scrolling to the top when a link is clicked that triggers javascript? 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