我正在做一页设计,但是在实现平滑滚动脚本时遇到了麻烦。
该脚本适用于简单的链接,甚至适用于没有下拉菜单的菜单项。
我已经尝试了一点修改脚本,甚至尝试了一个不同的脚本,但是仍然存在相同的问题。
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>