Question

我正在开发一个项目，需要从导航栏平滑滚动。这是平滑的滚动代码：

 $(function() {
  // Smooth Scrolling
  **$('a[href*="#"]:not([href="#"])')**.click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

但我也在我的网站上使用了一个带有右侧和左侧控件的bootstrap轮播，并且href类似下面的内容会改变旋转木马中的图像：

<a class="left carousel-control" **href="#myCarousel**" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

现在我因为href问题而无法停止使用平滑滚动效果，因为当我点击旋转木马中的左侧或右侧控件时，由于平滑滚动中的href功能，整个页面趋于下降旋转木马中的图像不会改变为下一个图像。可能的解决办法是什么？

Answer 1

只需在下面的行中添加另一个参数，如下所示：

$('a[href*="#"]:not([href="#"]):not([href="#myCarousel"])').click(function() {
    //your function
}

平滑滚动干扰自举轮播

1 个答案: