左右轮播控件在使用平滑滚动锚标记时不起作用

Question

我使用以下脚本为锚标签提供平滑滚动效果：

$(function() {
  $('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;
      }
    }
  });
});

使用此脚本后，引导轮播的左和右控件停止工作。

<a class="left carousel-control" href="#home-carousel" 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="#home-carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>

我该如何解决这个问题？

Answer 1

然后，

您只需像这样编辑平滑滚动的代码，具体取决于您是否具有ID header-menu或类header-menu

改变

$('a[href*=#]:not([href=#])').click(function() {

to（如果使用 ID 标题菜单）

$('#header-menu a[href*=#]:not([href=#])').click(function() {

或（如果您使用类标题菜单）：

$('.header-menu a[href*=#]:not([href=#])').click(function() {

这样，您只会将平滑滚动效果集中在菜单 href 元素上，并且脚本不会与您的引导 href "冲突"。