28

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

1
  • You could just use href="#id-of-choice" to move the page to an element with id="id-of-choice" Oct 30, 2021 at 6:39

4 Answers 4

76

Several 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);
  3. Call preventDefault on the event in your handler:

    function( e ) {
      e.preventDefault();
      // your event handling code
    }
    
3
  • 3
    thank you all for your answers. i used return false and it works perfectly stackoverflow is amazing !
    – samoyed
    Jan 8, 2010 at 10:22
  • Excellent solution thenduks, saved me a lot of hassle=)
    – Zo Has
    Nov 12, 2010 at 9:38
  • 5
    return false; is NOT the correct way to handle this. So often, developers lazily throw return false; at the end of their event handlers without understanding the consequences of this action. There is no reason to prevent propagation of the event. All you need to do here is prevent the user agent's default action. So, preventDefault() is the correct function to use here. Nov 21, 2012 at 15:09
5

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

0
1

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.

1

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.