Question

我正在使用一个JS脚本来阻止Nav深度的页面内容，但这会干扰我的页面滚动（使用id作为锚点） - 我不知道如何纠正这个并且我不知道如何解决这个问题。任何帮助将不胜感激。

这是我的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;
            }
        }
    }
}

这是我的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");
    });

});

Boostrap Carousel Scroll与JS页面滚动条冲突

1 个答案: