0

親愛なるstackoverflowers、

正しく連携していないように見える 2 つの JavaScript スニペットがあります。1 つ目は、ナビゲーションのクリック イベントで本文をフェードアウトし、別のページにリダイレクトするためのものです。しかし、これは「JavaScript-2」をトリガーするリンクをクリックした後にのみ機能しているようです。

最初のコードは次のとおりです。

// JavaScript-1
<script type="text/javascript">   
        $("a.transition").click(function(event){         
            event.preventDefault();                      
            linkLocation = this.href;
            $("body").fadeOut(1000, redirectPage);      
        });

        function redirectPage() {
            window.location = linkLocation;
        }
</script>

「JavaScript-2」は 2 番目のもので、「jquery.easing.1.3.js」と連携して、アンカーへのスムーズなスクロールを実現します。スクロールは常に正常に機能し、すべての状況で発生します。

理由はわかりませんが、スムーズにスクロールする JavaScript が原因で他の JavaScript が失敗するようです。

この小さな謎に対する答えを本当に楽しみにしています。

2番目のコードは次のとおりです。

    // JavaScript-2 
    <script type="text/javascript">  
        $(function() {
            $('ul.navscroll a, #test a').bind('click',function(event){              
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                event.preventDefault();
            });
        });
    </script>
4

1 に答える 1

0

Javascript-1次のようにコードを更新してみてください。

// JavaScript-1
<script type="text/javascript">   
   $(function() { // this fires the jQuery after load
        var linkLocation = false; // define the linkLocation var

        $("a.transition").click(function(event){         
            event.preventDefault();                      
            linkLocation = this.href;
            $("body").fadeOut(1000, redirectPage);      
        });

        function redirectPage() {
            window.location = linkLocation;
        }
   });
</script>

ここで修正される主な点は 2 つあります。

  1. $(function() {...});DOM が完全にロードされた後に jQuery-Events を起動します
  2. var linkLocationredirectPage()-Methodでアクセスする前に定義する必要があります

エラーを削除するにはJavascript-2（Javascriptが壊れる場所）、次のように更新します。

// JavaScript-2 
<script type="text/javascript">  
    $(function() {
        $('ul.navscroll a, #test a').bind('click',function(event){              
            target = $(this).attr('href'); // find the top of the target
            offset = $(target).offset(); // this returns an object {top: y,left: x}
            $('html, body').stop().animate({
                scrollTop: offset.top
            }, 1500,'easeInOutExpo');
            event.preventDefault();
        });
    });
</script>

のリンクをクリックするhref='#test'と、たとえば your <footer id='test'>.

于 2013-03-26T18:40:22.520 に答える