Question

我一直使用这个脚本（我认为在CSS Tricks中找到）来制作平滑的滚动锚链接：

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

它就像一个魅力！但是，我只是注意到这个脚本与Twitter Bootstrap轮播箭头的工作方式有冲突（因为它也使用了锚点）

        <a data-slide="prev" href="#mySlideshow" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
        <a data-slide="next" href="#mySlideshow" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>

我想知道是否有一种方法可以修改脚本以影响所有锚链接但是排除任何Bootstrap轮播中的锚点。

有什么想法吗？

Answer 1

只需像.not()

那样更改$('a[href*="#"]:not(.carousel-control)')参数

以下是您的代码的完整示例

$(function() {
  $('a[href*="#"]:not(.carousel-control)').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;
      }
    }
  });
});

如果您需要https://jsfiddle.net/eqaxxq5n/1/

，请在此处播放

但是像这样使用a[href*="#"]可能会再次引起任何问题，因此最好使用任何类或指标来初始化您的平滑效果，例如a.smoothClass[href*="#"]或其他内容。

希望你有意义。

平滑的滚动锚点影响bootstrap轮播箭头

1 个答案: