Question

I have a footer area that is display:none by default. This bottom footer area holds things like the menu and social links.

In order to see this menu, you scroll down to the BOTTOM of the page (all the way, so you cant scroll any farther). there you see and click a button that says ‘expand’. once you do that, the div beneath the expand button which holds the content animates with slideDown().

the problem is the page doesnt scroll along with bottom edge of the div as it animates downwards… so at first glance it looks like nothing happens until you realize you have to scroll down a little bit more. i want it to automatically scroll the page at the exact same speed/length that it animates.

heres the click function

$('#footer-click a').click(function() {
    if ($('#footer-inner').css('display') === 'none') {
        $('#footer-click a').html('Hide');
        $('#footer-inner').slideDown('medium');
} else {
        $('#footer-click a').html('Expand');
        $('#footer-inner').slideUp('medium');
    }
return false;
});

Answer 1

You should be able to use scrollTop() to scroll the extra distance:

$('#footer-click a').click(function() {
    if ($('#footer-inner').css('display') === 'none') {
        $('#footer-click a').html('Hide');
        $('#footer-inner').slideDown('medium', function() {
            $('html').scrollTop( $('html').scrollTop() + $('#footer-inner').outerHeight() );
        });
    } else {
        $('#footer-click a').html('Expand');
        $('#footer-inner').slideUp('medium');
    }
    return false;
});

Of course, this will make it happen all at once at the end. You might have to customize the animation to make it smooth. (Let me think about it…)

Edit: OK what you might want to do is simply show() the footer, and then use animate to scroll the page down. It gives the same effect. You can close it the same way as before:

$(function() {
    $('#footer-click a').click(function() {
        if ($('#footer-inner').css('display') === 'none') {
            $('#footer-click a').html('Hide');
            $('#footer-inner').show();
            // Some browsers use html, some use body.  Use the bigger one:
            var scrollY = $('body').scrollTop()?$('body').scrollTop():$('html').scrollTop();
            $('html, body').animate({
                scrollTop: scrollY + $('#footer-inner').outerHeight()
            }, 'medium');
        } else {
            $('#footer-click a').html('Expand');
            $('#footer-inner').slideUp('medium');
        }
        return false;
    });
});

Example: http://jsfiddle.net/Eeq26/4/

If there is a posibility the footer won’t be at the very bottom, you would need an if..then to check if scrollTop() == 0, and use slideDown() in that case.