Page jumps to top jquery .animate

jquery, jquery-animate, scrollto

Solution

If the trigger element is an empty anchor

<a href="#">some val</a>

then the location hash changes to "#" after clicking it. By not finding an area that corresponds with an empty hash, the browser scrolls the page to the top. Here's what you can do:

$('a[href=#]').on('click', function(e){
     e.preventDefault();
 });

Or you could do it like they did 10 years ago: change the empty anchor href to an empty javascript statement:

<a href="javascript:void();">some val</a>

update After looking at the markup, I've got the solution. All you have to do is to make sure that your `.container` has the ability to scroll. While animating, the elements gets the css property `overflow : hidden` (i don't really know where it gets it from) and that kind of resets your scroll position. So, all you have to do is to add this to your stylesheet:

.container{
    overflow: auto !important;
}

Problem

My problem is when I click on a (fixed position) div to animate another div the entire page jumps to the top. I have tried preventDefault and return false, but nothing seems to fix the problem! Please help. Here is the script ``` $(document).ready(function(){ $("#close").click(function(){ $("#info").animate({ width: "0", height:"0" }, 100 ); $("#info").hide(), $(".container").animate({ left:"0", width:"100%" }, 100 ); return false; }); $(".sidebar").click(function(evt){ evt.preventDefault(); $("#info").show(), $("#info").animate({ width: "25%", height:"100%", left:"0" }, 100 ); $(".container").animate({ left: "25%", width:"75%" }, 100 ); return false; }); }); ```

Original source