0

ユーザーがリンクをクリックした後、div要素をアニメーション化してブラウザウィンドウの上部で画面外にスライドさせようとしています。このリンクは、ユーザーが特定のポイントを超えてページを下にスクロールしたときに表示されます。divをクリックすると、ブラウザウィンドウがアニメーション化され、「トップに戻る」divがフェードアウトするときにページの上部にスクロールします。この「トップに戻る」divをフェードアウトさせるだけでなく、フェードアウトするときにブラウザウィンドウの上部にスライドさせてオフスクリーンにする必要があります。これが私がこれまでに持っているものです：

Javascript：

$(function(){
    $("#back-to-top").hide();

    $(function() {
        $(window).scroll(function() {
            if($(this).scrollTop() > 100) {
                $('#back-to-top').fadeIn('slow');
            } else {
                $('#back-to-top').fadeOut('slow');
            }
        });

        $('a#back-to-top').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;

            $('#back-to-top').animate({  // The part that doesn't work
                margin: '-800px 0 0 0'
                // top: '-800px' 
            });
        });
    });
});
4

1 に答える 1

1

問題はreturn false

 $('a#back-to-top').click(function() {
            $(this).animate({ bottom: '1000px', opacity: 0 }, 2000, function(){
                $('a#back-to-top').hide(function(){
                    $(this).css({ bottom: '40px', opacity: 1 });
                });
            });
            $('body,html').animate({
                scrollTop: 0
            }, 1500);
            return false;
        });

コードを更新しました。それはあなたが求めているものを完璧に機能させます。アニメーションが完了したら、リンクの位置と不透明度を復元する必要があります。

于 2012-11-11T19:04:26.753 に答える