2017-05-23 6 views
0

jQueryをブートストラップ内で初めて使用しました。w3school Tutorialを使ってスムーズなスクロールをページに追加しました。アンカーが同じページにある限り、これは正常に動作します。刻印を追加して同じメニューを作成したかったので、リンクは別のページのアンカーを指していません(例:home.html#section1)。
しかし、現時点では動作しません。リンクをクリックしても何の効果もありません。jqueryスムーズスクロールでスクロールして別のページに固定

スクリプトコード:

<script> 
    $(document).ready(function(){ 
     // Add smooth scrolling to all links in navbar + footer link 
     $(".navbar a, footer a[href='#home']").on('click', function(event) { 
      // Make sure this.hash has a value before overriding default behavior 
      if (this.hash !== "") { 
       // Prevent default anchor click behavior 
       event.preventDefault(); 

       // Store hash 
       var hash = this.hash; 

       // Using jQuery's animate() method to add smooth page scroll 
       // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area 
       $('html, body').animate({ 
        scrollTop: $(hash).offset().top 
       }, 900, function(){ 

        // Add hash (#) to URL when done scrolling (default click behavior) 
        window.location.hash = hash; 
       }); 
      } // End if 
     }); 

     $(window).scroll(function() { 
      $(".slideanim").each(function(){ 
       var pos = $(this).offset().top; 

       var winTop = $(window).scrollTop(); 
       if (pos < winTop + 600) { 
        $(this).addClass("slide"); 
       } 
      }); 
     }); 
    }) 
</script> 

私はインプリントページからコードスニペットを削除すると、アンカーリンクが動作しているが、何のスクロールがないため、home.htmlページのアニメーションの部分がありません(手動でスクロールするまでは、ロードされます)。 ご協力いただきありがとうございます!

答えて

0

アンカーリンクのみを使用している場合は、e.preventDefault()を削除してください。

+0

ありがとう、これはスクリプト全体を削除するのと同じ方法で動作します。アンカーリンクは今はうまく動作しますが、ターゲットサイトでは手動でスクロールするまで要素が読み込まれません。そのための解決策はありますか? – Stefan

+0

私はJSよりも多くのコードを参照する必要があります。あなたはjsfiddleやbootplyをまとめることができますか? – Ishio

関連する問題