ページ内でのaタグによるスクロールを作っているのですが、上記のエラーが出てスクロールがされません。
この原因はなんでしょうか?
ちなみにスクロールするたびにエラーが出て増えていきます。
設置箇所はヘッダーのナブバーのところでレスポンシブ対応の時にハンバーガーメニューを押すとモーダルが表示されるのですが、
モーダルが出た後のaタグを押した後にスクロールの移動がされません。
モーダル出る前でしたら、スクロールされます。
WordPressで作成しております。
$('a.nav-link[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, );
$('body').toggleClass("fixed-header");
return false;
}
}
});
$('.nav-link').click(function() {
$('.navbar-collapse').collapse('hide');
});
$('#navbar-mobile').click(function () {
$('body').toggleClass("fixed-header");
})
.navbar {
padding-left: 0;
padding-right: 0; }
.navbar .logo h1 {
width: 170px;
height: 35px;
display: block;
text-indent: -99999em;
background-image:url("../images/logo.svg") ;
background-repeat: no-repeat;
background-size: contain;
}
.navbar .logo .slogan {
color: #000000;
display: block;
font-size: 10px;
font-weight: 550; }
.navbar .navbar-bg {
margin: 0 auto; }
.navbar.navbar-expand-lg .navbar-nav .nav-link {
padding: 20px 20px;
color: #000000;
font-size: 18px;
text-transform: uppercase;
transition: all 0.2s ease-in-out; }
.navbar.navbar-expand-lg .navbar-nav .nav-link:hover, .navbar.navbar-expand-lg .navbar-nav .nav-link:active {
color: #E30000; }
.burger span:nth-child(1) {
animation: ease .7s top forwards; }
.burger span:nth-child(2) {
animation: ease .7s scaled forwards; }
.burger span:nth-child(3) {
animation: ease .7s bottom forwards; }
.navbar-open {
display: none; }
.navbar-close {
display: block; }
.collapsed .burger span:nth-child(1) {
animation: ease .7s top-2 forwards; }
.collapsed .burger span:nth-child(2) {
animation: ease .7s scaled-2 forwards; }
.collapsed .burger span:nth-child(3) {
animation: ease .7s bottom-2 forwards; }
.collapsed .navbar-open {
display: block; }
.collapsed .navbar-close {
display: none; }
.navbar-toggler-text {
margin-top: 3px;
display: block;
font-size: 8px;
color: #000000;
text-transform: uppercase; }
.burger span {
margin-left: 3px;
display: block;
width: 18px;
border-radius: 3px;
height: 2px;
background: #000000;
transition: all .3s;
position: relative; }
.burger span + span {
margin-top: 3px; }
<body id="home" class="home">
<div class="wrapper">
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg">
<a class="logo navbar-brand" href="/" title="">
<h1></h1>
</a>
<button id="navbar-mobile" class="navbar-toggler collapsed" type="button"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="burger">
<span></span>
<span></span>
<span></span>
</span>
<span class="navbar-toggler-text"><span class="navbar-open">Menu</span><span
class="navbar-close">Close</span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-bg">
<?php wp_nav_menu( array(
'theme_location'=>'global',
'container' =>'',
'menu_class' =>'',
'link_before' =>'<span>',
'link_after' =>'</span>',
'items_wrap' =>'<ul id="main-nav" class="navbar-nav ml-auto">%3$s</ul>'));
?>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>