0

私は単一ページのスクロール サイトとそのスクロールをうまく開発しています。しかし、一番上の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>

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

1 に答える 1

1

scrollPage 要素は動的に作成されないため、(ウィンドウ スクロール イベント ハンドラーの外で) クロック イベント ハンドラーを 1 回だけアタッチする必要があります。

$('#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/

于 2013-04-10T14:02:08.257 に答える