Question

I am trying to animate a div element to slide offscreen at browser window top after a user clicks on a link. This link appears when a user scrolls the page down past a certain point. When the div is clicked, the browser window animates and scrolls to the top of the page as the “Back to top” div fades out. I am needing to make this “Back to top” div not only fade out, but also slide to the top of the browser window offscreen as it’s fading out. Here’s what I have thus far:

Javascript:

$(function(){
    $("#back-to-top").hide();

    $(function() {
        $(window).scroll(function() {
            if($(this).scrollTop() > 100) {
                $('#back-to-top').fadeIn('slow');
            } else {
                $('#back-to-top').fadeOut('slow');
            }
        });

        $('a#back-to-top').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;

            $('#back-to-top').animate({  // The part that doesn't work
                margin: '-800px 0 0 0'
                // top: '-800px' 
            });
        });
    });
});

Answer 1

I think the problem can be with the return false

 $('a#back-to-top').click(function() {
            $(this).animate({ bottom: '1000px', opacity: 0 }, 2000, function(){
                $('a#back-to-top').hide(function(){
                    $(this).css({ bottom: '40px', opacity: 1 });
                });
            });
            $('body,html').animate({
                scrollTop: 0
            }, 1500);
            return false;
        });

I updated the code. It works perfectly what you are asking for. You need to restore the link’s position and opacity, once the animation completes.