JQuery: Prevent Scrolling to the Top of a Page

Problem: Each JQuery click event scrolls to the top of the HTML page.



Solution: Often, links (<a href="#">) are used to create buttons with JQuery and JavaScript applications. When the internal link "#" is used the default behavior for that link is to go to the top of the page. However, in many situations, this is not the desired behavior. There are two ways to prevent this behavior.



First, simply return false at the end of your method.

return false;



Second, use the JQuery preventDefault method on the event.

e.preventDefault();



Thanks for this StackOverflow article on the subject.