jQueryでページ内リンクの実装について

jQueryでページ内をスムーズにスクロールするようにしたいのですがエラーになってしまいます。

jQuery
1$(function() {
2    $(".header-right #nav ul li a").click(function(){
3        var id = $(this).attr("href");
4        var position = $(id).offset().top;
5        $("html,body").animate({
6          "scrollTop":position
7        },500);
8      });
9});

エラーメッセージ

プロパティが読み取れないとのことで
$(".header-right #nav ul li a")の部分が読み取れてなくて
idを取得できてないのかな・・・と思いつくのですがどう改善していいのか
わからないのでご教示いただきたい。
※（'a[href^="#"]'）に書き換えてみましたが相変らず。。

デバックしてみました。

step in to next functionを押すとjQuery.jsに飛びます。

clickメソッド内にブレークポイントを付けてみました。

動作は止まることなく処理されました。

click.functionの中に入らずに処理が終わるため
id を取得できずに終わるということでしょうか？

以上、よろしくお願いいたします。

退会済みユーザー

2019/05/05 22:17

Chrome のディベロッパーツールなどを使ってデバッグしましょう。話はそれからだという感じです。あと、アップされたエラーメッセージは途中で切ってませんか？ undefined の何かの top プロパティが読めないと言ってますが、その「何か」がエラーメッセージに書いてあるのでは？

m.ts10806

2019/05/06 00:11

>idを取得できてないのかな・・・取得できているかどうかはデバッグして確認してください。

siruku6

2019/05/06 03:41

・var id = $(this).attr("href"); には何が代入されているか、・$(id) でいったい何を取得できているのか、これが本当に想定した通りのものになっていますか？おそらくそこに問題があると思われます。中に何が入っているかは、console.log() や alert()などで確認すればわかると思います。

退会済みユーザー

2019/05/06 06:48

追加された画像を見ると var position = $(id).offset().top; の top の下に赤の波線が出ていますが、ということは $(id).offset() が undefined ということのようです。$(id) で目的の jQuery オブジェクトを取得できてないのでは？　そのあたりから追いかけてみてはいかが？

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

回答2件

ベストアンサー

【1枚目エラー画像】

Uncaught TypeErro: Cannot read property 'top' of undefined.
取得失敗のタイプエラー: 未定義のtopプロパティを読み込めません"

から、要素の取得がうまくいっていない様子。

上記のコードをコピペし再実装ScrollToId 完成形のデモ | JS Binしてみましたが、js+jqueryの構文は正しかったです???????? ですので、考えられるエラーの原因は、

HTMLとjsファイルの間にズレがある可能性がかなり高い。(スペルミス等)

もう一度、
HTMLファイル: id,class名
jsファイル: jQueryのセレクター

両者のid,classにスペルミスがないか、確認してみて下さい。

投稿2019/05/07 07:33

退会済みユーザー

総合スコア0

gomakasu423

2019/05/07 11:30

ありがとうございます。おっしゃる通りHTMLの記述の誤りでした。修正前<div id="#about"～～> 修正後<div id ="about"~~> すべてidで記述ミスをしておりました。

退会済みユーザー

2019/05/07 12:45

良かった!ε٩( º∀º )۶з 実は、僕も良くらやかしたものです????????w こういうタイプのエラーは気付きにくく検出しにくいので、僕は今でも「ブラウザがバグってるんじゃないのか?(ブラウザを疑いだすw)」となった際はw、多くはHTML内にエラー(スペルミス・余分な物が混入・タグ閉じ忘れ等)が隠れていた事が多い気がします????????笑ともあれ、良かったです????????

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

ハッシュから始まっているhrefを拾うところまでOKならあとは
所定のハッシュを持つリンク先があるかどうかをチェックするだけです

javascript
1<script>
2$(function() {
3  $('.header-right #nav ul li a[href^="#"]').on('click',function(e){
4    e.preventDefault();
5    var id = $(this).attr("href");
6    if($(id).length>0){
7      var position = $(id).offset().top;
8      $("html,body").animate({
9        "scrollTop":position
10        },500);
11    }
12  });
13});
14</script>
15<div class="header-right">
16<div id="nav">
17<ul>
18<li><a href="#hoge">#hoge 存在する</a></li>
19<li><a href="#fuga">#fuga 存在しない</a></li>
20</ul>
21</div>
22</div>
23<div id="hoge" style="postion:absolute;margin-top:999px">hoge</div>