当使用锚标签的平滑滚动时，左右轮播控件不起作用答案

【问题标题】：Left and Right Carousel Controls not Working when Smooth Scroll for Anchor Tags Used当使用锚标签的平滑滚动时，左右轮播控件不起作用
【发布时间】：2015-06-15 07:59:00
【问题描述】：

我正在使用以下脚本来实现锚标签的平滑滚动效果：

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

使用此脚本后，Bootstrap Carousel 的左右控件停止工作。

<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>

我该如何解决这个问题？

【问题讨论】：

你使用平滑滚动效果的锚标签是什么，或者只是一个菜单？
@brance 只是菜单
您的菜单 div 是否有 id，例如 #menu 或类似的东西？
是的。我正在为它使用 header-menu 标记

标签： javascript jquery twitter-bootstrap carousel

【解决方案1】：

然后你只需要像这样编辑平滑滚动的代码，这取决于你的 ID 是 header-menu 还是类 header-menu

改变

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

到（如果您使用 ID 标题菜单）

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

或者（如果你使用类 header-menu）：

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

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

【讨论】：