I'm in the process of creating a single page scroll website and everything seems to be working smoothly. However, I've encountered an issue with the scroll to top functionality. When I reach the top of the page and try to scroll down again, the site becomes unresponsive. Can someone help me identify any mistakes in my jQuery code?
The problem seems to be more prominent in Firefox. You can view the issue here: http://jsfiddle.net/swapnesh/jSa3z/
Script:
<script>
jQuery(document).ready(function(){
$('section[data-type="background"]').each(function(){
//assigning the object
var $bgobj = $(this);
$(window).scroll(function(){
var yPos = $(window).scrollTop() / $bgobj.data('speed');
var coords = '50%' + yPos + 'px';
//Move the background
$bgobj.css({ backgroundPosition : coords });
})
})
$(window).scroll(function(){
if( $(this).scrollTop() > 600 ) {
$('#scrollpage').fadeIn();
$('#scrollpage').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
})
}
else {
$('#scrollpage').fadeOut();
}
})
})
</script>
HTML:
<section id="home" data-type="background" data-speed="10" class="pages">
<article>Swapnesh Sinha</article>
</section>
<section id="about" data-type="background" data-type="10" class="pages">
<article>Web Developer - PHP, MYSQL, WORDPRESS</article>
</section>
<div id="scrollpage"></div>