平滑的滚动锚点影响引导转盘箭头 [英] Smooth scrolling anchors affecting bootstrap carousel arrows

问题描述

  $我一直使用这个脚本（在我想的CSS技巧中找到） （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 =prevhref =＃mySlideshowclass =left carousel-control>< i class =fa fa-chevron-left>< / i>< / a> 
< a data-slide =nexthref =＃mySlideshowclass =right carousel-control>< i class =fa fa-chevron-right>< / i> < / A> 
  

我想知道是否有办法修改脚本来影响所有锚点链接但排除任何Bootstrap旋转木马内的锚。

任何想法？

解决方案

只需更改 .not（）参数，如 $（'a [href * =＃]：not（.carousel-control）'）

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

 <$ c $（函数（）{
 $（'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（ （$ {
'，'html，body'）。animate（{
 scrollTop：target.offset（）。top 
}，1000）; 
 return false; 
 } 
} 
}）; 
}）; 
  

如果您想 https://jsfiddle.net/eqaxxq5n/1/

但是像这样使用 a [href * =＃] 可能会再次引发任何问题，所以最好使用任何类或指标来初始化您的平滑效果，如 a.smoothClass [href * =＃] 或别的东西。

希望它对你有意义。 / p>

I've always used this script (found in CSS Tricks I think) to make smooth scrolling anchor links:

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

It works like a charm! However, I just noticed that this scripts conflicts with how the Twitter Bootstrap carousel arrows work (since it uses anchors as well)

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

I would like to know if there's a way I could modify the script to affect all anchor links BUT exclude the anchors inside any Bootstrap carousel.

Any ideas?

解决方案

just change .not() argument like $('a[href*="#"]:not(.carousel-control)')

Here is the full example of your code

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

Play here if you want https://jsfiddle.net/eqaxxq5n/1/

But using like this a[href*="#"] might cause any issue again so it's better use any class or indicator to initialize your smooth effect like a.smoothClass[href*="#"] or something else.

Hope it make sense to you.

这篇关于平滑的滚动锚点影响引导转盘箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！