В моем проекте используется простое меню переключения, и мне нужно исключить последнюю ссылку (#blog) из обработчика кликов, выполняющего анимацию прокрутки и изменения URL.
Здесь HTML:
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<ul class="main-nav" id="js-menu">
<li>
<a href="index.html" class="nav-links">Home</a>
</li>
<li>
<a href="#about" class="nav-links">About</a>
</li>
<li>
<a href="#skillset" class="nav-links">Skillset</a>
</li>
<li>
<a href="#portfolio" class="nav-links">Portfolio</a>
</li>
<li>
<a href="#contact" class="nav-links">Contact</a>
</li>
<li>
<a id="blog" href="#https://anzudev.blogspot.com/" target="_blank" class="nav-links">Blog</a>
</li>
</ul>
</nav>
А здесь jQuery:
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top }, 1000);
});
Я добавил jQuery обработчик клика для всех навигационных ссылок, чтобы плавно прокручивать этот раздел и соответствующим образом изменять URL. Однако мне нужно исключить навигационную ссылку #blog, так как она перенаправляет на внешний сайт. Я пробовал следующие селекторы:
- $('nav a[href*="#"]').not("#blog")
- $('nav a[href*="#"]').not(":last")
Но при нажатии «#blog» все равно будет пытаться go myurl.com/#https://anzudev.blogspot.com/ вместо внешнего ссылка.
У меня есть простой макет моего кода здесь, на Codepen для тестирования.
Любой совет, что я здесь не так делаю? Ура!