2

私のサイトhttp://www.cmclove.org/bootstrapでトップへのスクロールアニメーションを実装しようとしてい ます

しかし、上にスクロールして下にスクロールしようとすると、ページが私と戦っているように見え、下に戻りたくありません。

数回実行するか、アニメーションが終了したらすぐに下にスクロールしてみてください。

ここにjqueryがあります：

$(document).ready(function() {
    $(function() {

        /* set variables locally for increased performance */

        var scroll_timer;
        var displayed = false;
        var $message = $('#message a');
        var $window = $(window);
        var top = $(document.body).children(0).position().top;

        /* react to scroll event on window */
        $window.scroll(function(e) {

            window.clearTimeout(scroll_timer);
            e.preventDefault();
            scroll_timer = window.setTimeout(function(e) {
                if ($window.scrollTop() <= top) {
                    displayed = false;
                    $message.fadeOut(800);
                    e.preventDefault();

                }
                else if (displayed == false) {
                    displayed = true;
                    $message.stop(true, true).show(1000).click(function(e) {
                        $('html, body').animate({
                            scrollTop: 0
                        }, 'slow');
                        $message.fadeOut(1000);
                        e.preventDefault();


                    });
                }

            }, 100);
        });
    });
});​

ここにhtmlがあります

  <a id="top"></a>

  <!--- all my html stuff -->

  <div id="message"><a href="#top"></a></div>
  </footer>
4

1 に答える 1

1

私は何が起こっているのか知っています。「上にスクロール」が発生するたびに、新しい「クリック」イベントをバインドしています。そして、それらが合計されるので、スクロールバーがさらに1秒間フリーズするたびに。したがって、最初に上にスクロールしても、何もフリーズしません。次回は1秒間フリーズし、次回は2秒間フリーズします。

私はあなたが必要だと思います：

$message.unbind('click');

直前：

$message.stop(true, true).show(1000).click(function(e) {

すなわち：

else if (displayed == false) {
  displayed = true;
  $message.unbind('click');
  $message.stop(true, true).show(1000).click(function(e) {
  ...

信じられない場合は、「トップに移動」を数回実行してフリーズさせてから、Firebugコンソールに次のように記述します。

$('#message a').unbind('click');

もう一度やり直してください。フリーズがなくなったことがわかります（「クリック」イベントの複数のバインディングで再度蓄積するまで）。

乾杯。

于 2012-12-10T21:36:25.430 に答える