我的scrollTop() jQuery方法一旦滚动就挂起浏览器

My scrollTop() jQuery method hangs browser once scrolled

本文关键字:滚动 挂起 浏览器 方法 scrollTop jQuery 我的      更新时间:2023-09-26

我正在开发一个单页滚动网站和它的滚动很好。但每当我点击滚动到顶部的div,它就会把我带到最上面的位置,但当我试图向下移动网站时,它就会挂起。让我知道我在jQuery中做错了什么。

问题在Firefox下更为严重http://jsfiddle.net/swapnesh/jSa3z/

脚本 -

<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>

<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>

scrollPage元素不是动态创建的,所以您只需要附加一次时钟事件处理程序(在窗口滚动事件处理程序之外)

$('#scrollpage').click(function(ev){
    ev.preventDefault();
    $("html, body").animate({ scrollTop: 0 }, 600);
})
$(window).scroll(function(){
    if( $(this).scrollTop() > 600 ) {
        $('#scrollpage').fadeIn();
    }
    else {
        $('#scrollpage').fadeOut();
    }
})

更新小提琴:http://jsfiddle.net/jSa3z/3/