I\'m using the scrollTop function to create a parallax scrolling website, binding the scrollTop function to different anchors throughout my website.
The problem I\'m hav
Instead of doing your fade function on .scroll(), which is fired every time the page scrolls a tiny bit, do it on the .animate() callback, which is only triggered once when the scrolling is complete.
$('.recipes').click(function(){
var startY = $('#container').position().top + $('#container').outerHeight();
$('html,body').animate(
{ scrollTop: $(".main1").offset().top },
1500,
function() {
checkY(startY);
}
);
});
$('.cooking').click(function(){
var startY = $('#container').position().top + $('#container').outerHeight();
$('html,body').animate(
{ scrollTop: $(".main2").offset().top },
1500,
function(){
checkY(startY);
}
);
});
And the OP's original checkY()
function:
function checkY(i) {
if( $(window).scrollTop() > i ) {
$('#backToTop, #navigation').fadeIn(600);
} else {
$('#backToTop, #navigation').fadeOut(600);
}
}
If you are open to an alternative approach, using a plugin, jQuery scrollTo has always been very smooth when I have used it.
This would let you do
$('.recipes').click(function(){
$.scrollTo('.main1', 1500);
});