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

使用此脚本后，Bootstrap Carousel的Left和Right控件停止工作。

<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() {

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

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

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

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

这样，您只会将平滑滚动效果聚焦在菜单href元素上，并且脚本不会“碰撞”＃34;和你一起引导hrefs。

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

1 个答案: