CODEWITHSUNDEEP
jqueryjquery-animatescrollto
Melzee
Melzee

Reputation: 91

Page jumps to top jquery .animate

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;
    });
});

Upvotes: 3

Views: 2292

Answers (1)

gion_13
gion_13

Reputation: 41533

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;
}

Upvotes: 7

Related Questions