2017-11-13 3 views
1

動作しない私は、ブートストラップ3.3.7で正常に動作し、私のナビゲーションバーで、バック・ツー・トップリンクを持っていなく、ブートストラップで4ベータ2ブートストラップバック・ツー・トップ4のベータ2が

バックツートップJSウェブアプリケーションのファイル

$(document).ready(function(){ 
    var offset = 100; 
    var duration = 800; 

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

// scroll body to 0px on click 
$('#back-to-top').click(function (event) { 
    event.preventDefault(); 
    $('#back-to-top').tooltip('hide'); 
    $('body,html').animate({ 
     scrollTop: 0 
    }, duration); 
    return false; 
}); 

$('#back-to-top').tooltip('show'); 
}); 

HTMLコード

<body id="page-top" data-spy="scroll" data-target=".fixed-top"> 

     <div id="main-navbar" class="navbar fixed-top navbar-expand-md navbar-custom navbar-dark" role="navigation" > 


       <div class="navbar-header"> 

        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-main-collapse"> 

         <span class="sr-only">Toggle navigation</span>Menu 
         <i class="navbar-icon fa fa-bars icon"></i> 
         <!--<span class="navbar-toggler-icon"></span>--> 

        </button> 

        <a href="#" id="menu-toggler" class="navbar-brand"> <i class="fa fa-bars"></i></a> 
        <a href="#" class="navbar-brand page-scroll" id="back-to-top">Funeral Aftercare Service</a> 

       </div> 

       <div class="collapse navbar-collapse" id="navbar-main-collapse"> 
        <ul class="nav navbar-nav"> 
         <li class="d-none"><a href="#page-top"></a></li> 
         <li class="nav-item"> 
          <a class="<?php echo $index; ?>" href="index.php"> 
           <span class="fa fa-home"></span> Home <span class="sr-only">(current)</span> 
          </a> 
         </li> 
         <li class="nav-item"><a class="<?php echo $about; ?>" href="about_us.php">About Us</a></li> 
         <li class="nav-item"><a class="<?php echo $contact; ?>" href="contact_info.php">Contact Info</a></li> 

        </ul>... 

IのためにjQueryのファイル(jqueryの-3.2.1.min.js)負荷より多くの機能、ブートストラップ3と気付きます私の背中合わせのリンクは、ブートストラップ4の時より少なくなります。で

ブートストラップ4負荷のみ第2は、ブートストラップ3負荷ながらビューを検査それらのすべて

クリック -backツーtop.js(jQueryの)

クリック - jqueryの-3.2.1.min.js(バブリングDOM2)

とfocusIn - jqueryの-3.2.1.min.js(jQueryの)

focusout - jqueryの-3.2.1.min.js(jQueryの)

マウスアウト - jqueryの-3.2.1.min.js(jQueryの)

マウスアウト - jqueryの-3.2.1.min.js(バブリングDOM2)

マウスオーバー - jqueryの-3.2.1.min.js(jQueryの)

マウスオーバー - jqueryの-3.2.1.min.js(バブリングDOM2)

答えて

0

ブートストラップ4ドキュメントに基づい:
「IFコンパイルされたJavaScriptを使用していますが、jのCDNバージョンを含めることを忘れないでくださいその前に、クエリとPopper.js。」

あなたのコードが正しいようだ、あなたはjqueryの後popper.jsをロードする必要があり、4

+0

をブートストラップ前に、私がブートストラップ後popper.jsを入れて、それはそれだったようですアニメーションがうまくいかなかったのはなぜですか? –

+0

@JohnLaimuinスクロールアニメーションを意味しますか?わたしにはできる。あたりです。 –