0

ページ内での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>

5
  • 質問のコードには、offsetTopという文字列が含まれていないように思われますが、質問のエラーが発生したコードですか? scrollTop: (target.offset().top) という行がありますが、offset().top の部分が、offsetTopであるなどのタイプミスはありませんか?
    – Fumu 7
    2021年3月13日 6:52
  • エラーはこのように出ています。 Uncaught TypeError: Cannot read property 'offsetTop' of undefined at jquery.common.js?ver=1.0:10 at HTMLDocument.<anonymous> (jquery.common.js?ver=1.0:10) at e (jquery-3.5.1.min.js?ver=3.5.1:2) at t (jquery-3.5.1.min.js?ver=3.5.1:2)
    – user44313
    2021年3月13日 9:21
  • jqueryの読み込んでいる中でエラーが出ていると解釈しておりました。 タイプミスもなさそうです。確認してみます。
    – user44313
    2021年3月13日 9:24
  • タイプミスもなさそうなのですが原因わかりますでしょうか
    – user44313
    2021年3月13日 13:23
  • PHPのコードでテンプレートのコードを提示していますが、今回はPHPは関係なくフロントエンドの問題なので、HTMLだけで再現が取れるコードをいただけるとよいかと思います。ブラウザに表示したHTMLのコードをもとに再現性の取れるものをいただけますか?
    – keitaro_so
    2021年3月16日 1:28

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。