Question

This should be easy, but I’m a newbie…

How can I make the show function and the click to animate function work as one?

function scrollit() {
    $("#scrollDown").show();
    $("#scrollDown").click(function() {
        $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
    });
}

See: http://jsfiddle.net/elasticGurl/3r6Jp/4/

What’s supposed to happen is

1. the button is clicked
2. the hidden div scrollDown is displayed
3. At the same time as #2, it should also move down a bit at the same time

The problem is it needs to be clicked twice in order for it to move down.

Answer 1

That’s because your click function is on your hidden div instead of on your button

function scrollit() {

    $("#scrollDown").show();
    $('html,body').animate({scrollTop: $('#scrollDown').offset().top}, {duration:1500, queue:false});
}​