Question

I am running some JavaScript on my page. Whenever it catches an event that is attached to an anchor <a> element and executes the handler (which I’ve attached using jQuery) the scroll position resets back to the top of the page. Is there a solution?

Answer 1

While handling clicks on <a> tags if you leave the href attribute as # the scroll thing you mention will happen. This is because the browser executes the default action at the end of the event chain (this happens because of the so called event bubbling)

To solve this you have to prevent the browser’s default handling of the click event, this can be done in different ways:

• replace href='#' with href='javascript:void(0)'
• return false from your event handler function.
• use jQuery’s preventDefault method