I’m currently working on a website where I have a fullscreen .intro DIV. When clicking on .down, the page smoothly scrolls to the main content and the .intro div fades out.
Everything seems to be functioning correctly, except that after the .intro fades out, the page suddenly shifts downward, forcing the user to scroll back up. This is not an ideal user experience.
I’ve been unable to identify the cause of this issue. You can view a working example in my JSFiddle. In the JSFiddle, I've included a gradient background so you can see the page jumping down after the 1500 milliseconds it takes for .intro to fadeOut.
Below is the jQuery code I am using:
(function($) {
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
});
});
})(jQuery);
$(".down").click(function() {
$(".intro").fadeOut(1500);
});