平滑滚动javascript代码与Bootstrap标签代码混淆

Smooth scrolling javascript code messing with Bootstrap Tab code

本文关键字：代码 标签 Bootstrap 滚动 javascript 平滑      更新时间：2023-09-26

我有以下代码来实现页面导航的平滑滚动，我只是从某个我不记得的地方复制粘贴。由于平滑滚动发生在锚标记点击，它搞砸了Bootstrap Javascript Tab也利用锚标记(这是我的结论，我希望我是正确的)。

$(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[href*="#"]:not([href="#"])')部分的代码，有人能把一些光在这是做什么?此外，我如何解决这个问题，使上述函数仅在上触发页面锚点击 ?

<>之前(href * = " # "):没有([href = " # "]) 之前

上面的选择器消失了目标一个标签，href="#smthing"。所以默认情况下，它的引导选项卡功能已经消失了。

而不是增加css特异性使用父类

 $(function() {
  $('.myParent 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;
      }
   }
 });
});
相关文章：