Boostrap旋轉木馬滾動與JS頁面滾動衝突

Question

我正在使用JS腳本，從導航的深度偏移頁面內容，但這是干擾我的頁面滾動（使用ID作爲錨點） - 我不知道如何更正這並沒有在JS上找到。任何幫助將不勝感激。

THIS IS MY JS：

function scroll_if_anchor(href) { 
    href = typeof(href) == "string" ? href : $(this).attr("href"); 

    // You could easily calculate this dynamically if you prefer 
    var mq = window.matchMedia("(max-width: 991px)"); 
     if (mq.matches) { 
      var fromTop = 0; 
     } 
     else { 
      var fromTop = 130; 
     } 

    // If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo) 
    // Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174 
    if(href.indexOf("#") == 0) { 
     var $target = $(href); 

     // Older browser without pushState might flicker here, as they momentarily 
     // jump to the wrong position (IE < 10) 
     if($target.length) { 
      $('html, body').animate({ scrollTop: $target.offset().top - fromTop }); 
      if(history && "pushState" in history) { 
       history.pushState({}, document.title, window.location.pathname + href); 
       return false; 
      } 
     } 
    } 
} 

THIS IS MY HTML

<div id="carousel1" class="carousel slide" data-ride="carousel"> 

    <div class="carousel-inner" role="listbox"> 

     <?php 
      $loop = new WP_Query(array(
       'post_type' => 'banner', 'orderyby' => 'post_id', 'order' => 'ASC', 
       'posts_per_page' => 1 
      )); 
      while ($loop->have_posts()) : 
      $loop->the_post(); 
     ?> 

    <div class="item active"> 
    <?php the_post_thumbnail('full');?> 
     </div><!-- item active --> 
    <?php 
    endwhile; 
    wp_reset_postdata(); 
    ?> 

     <?php 
      $loop = new WP_Query(array(
       'post_type' => 'banner', 'orderyby' => 'post_id', 'order' => 'ASC', 
       'posts_per_page' => 10, 
       'offset' => 1 
      )); 
      while ($loop->have_posts()) : 
      $loop->the_post(); 
     ?> 

    <div class="item"> 
    <?php the_post_thumbnail('full');?> 
    </div><!-- item --> 

    <?php 
     endwhile; 
     wp_reset_postdata(); 
    ?> 


    </div> <!-- CAROUSEL inner --> 

    <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a> 

    </div> <!-- CAROUSEL --> 

Answer 1

我找到了一個解決方案：

$(document).ready(function(){ 
    // Enable Carousel Controls 
    $(".left").click(function(){ 
     $("#carousel1").carousel("prev"); 
    }); 
    $(".right").click(function(){ 
     $("#carousel1").carousel("next"); 
    }); 

});