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});
}
Domanda
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.
Soluzione
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});
}
Altri suggerimenti
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);
});
});