jQuery平滑滚动脚本不适用于下拉链接

时间:2019-09-09 11:12:57

标签: jquery html twitter-bootstrap

我正在做一页设计,但是在实现平滑滚动脚本时遇到了麻烦。

该脚本适用于简单的链接,甚至适用于没有下拉菜单的菜单项。

我已经尝试了一点修改脚本,甚至尝试了一个不同的脚本,但是仍然存在相同的问题。

jQuery

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

HTML:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#section-2" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> WER WIR SIND </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
       <a class="dropdown-item" href="https://www.domain.de">TEAM</a>
       <a class="dropdown-item" href="http://www..domain.de">PARTNER</a>

    </div>
</li>

如果存在正常链接,则可以正常工作;如果具有dropdown-toggle类,则无效。

工作链接示例:

<li class="nav-item"><a href="#section-7" class="nav-link"> KONTAKT  </a>

0 个答案:

没有答案