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});
}
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
The problem is it needs to be clicked twice in order for it to move down.
La solution
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});
}
Autres conseils
You are just binding the event of click you need to fire the event too:
function toggleDiv() {
$("#scrollDown").show().click(function() {
$('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
});
$("#scrollDown").click();
}
Here is working sample: http://jsfiddle.net/FSfRR/1/
var count = 0;
$(".checkout_btn").click(function() {
$("#scrollDown").show();
count++;
$('html,body').animate({scrollTop: $('#scrollDown').offset().top}, 1500);
if(count==1)
$(this).trigger('click');
else
count = 0;
});
try with jQuery 1.8.2
$(document).on('click','p#scrolltest', function (){
$("div#scrollDown").show('fast', function(){
$('body').animate({
scrollTop: $('#scrollDown').offset().top
}, 1500);
});
});