ページ内リンクで、コンソールエラーがでて機能しません。よろしくお願いいたします。

前提・実現したいこと

問題のサイト
上記のサイトで、以下の場所で、
該当箇所
ページ内リンクしたいのですが、コンソールを見るとエラーが出ていて、スムーススクロールが動きません。
うまくスムーススクロールでページ内リンクが動くようにしたいです。

発生している問題・エラーメッセージ

コンソールに以下のようなエラーメッセージが出ています。

Uncaught TypeError: Cannot read property 'top' of undefined
    at HTMLAnchorElement.<anonymous> ((index):583)
    at HTMLAnchorElement.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLAnchorElement.r.handle (jquery.js?ver=1.12.4:3)

該当のソースコード

ワードプレスサイトでして、footer.phpに以下のようなjsの記述があります。

js
1$('.smooth').click(function() {
2      var href= $(this).attr("data-href");
3      var target = $(href == "#" || href == "" ? 'html' : href);
4      var position = target.offset().top - $('.move_nav_area').outerHeight() - 30;
5      $("html, body").animate({scrollTop:position}, 800, 'swing');
6      return false;
7    });

試したこと

smoothというクラスをつければそれをクリックしたときにスムーススクロールするという記述だと思いますので、リンクタグにsmoothというクラスを付けました。しかしだめでした。
ウィンドウズ環境ですので、firefox、edge、chromeで試してみましたが、どれもだめでした。

補足情報（FW/ツールのバージョンなど）

いろいろ調べてみましたが、なかなか解決に至る情報が得られません。
どなたかわかる方いらっしゃったらよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

そういうときはコンソールに値を出すとわかりやすいです。
以下のパターンA、B、Cいずれもエラーになりませんよね？
なのでvar hrefが原因だとわかります。

var href= "#";        // パターンA      
var href= "#course1"; // パターンB
var href= "#course2"; // パターンC

// 上記どのパターンでも以下はエラーになりません
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - $('.move_nav_area').outerHeight() - 30;
console.log('position=',position);

よく見てみると、hrefの取得がデータ属性の場合の書き方になっています。
var href= $(this).attr("data-href");

これを次のように変更してみてください。
var href= $(this).attr("href");

投稿2021/04/06 09:00

clean

総合スコア50

shunsaku87

2021/04/06 09:09 編集

お忙しいところありがとうございます！すごく丁寧に教えていただいて感謝します。すみません、この記述、他のところでも使っていまして、どこで使っているかわからないんですね。 jsを変更してしまうと、他のところに影響がでて動かなくなるのではないかと思います。ですので、jsの記述を変更するのではなく、このdata-hrefの書き方に合わせて、htmlの方で記述の仕方を工夫して機能するようにすることはできないですか？よろしくお願いいたします。