

ページ内でのaタグによるスクロールを作っているのですが、上記のエラーが出てスクロールがされません。

この原因はなんでしょうか？  
ちなみにスクロールするたびにエラーが出て増えていきます。

設置箇所はヘッダーのナブバーのところでレスポンシブ対応の時にハンバーガーメニューを押すとモーダルが表示されるのですが、  
モーダルが出た後のaタグを押した後にスクロールの移動がされません。  
モーダル出る前でしたら、スクロールされます。

WordPressで作成しております。

[code]

      $('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");
      })
[/code]

[code]

    .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; }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2021-03-13T03:09:01.123
74639
2021-03-13T05:07:05.870
2021-03-13T05:07:05.870
44313
44313
question
javascript jquery wordpress
Uncaught TypeError: Cannot read property 'offsetTop' of undefinedと出てページ遷移させることができません。