質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1445閲覧

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

gomakasu423

総合スコア31

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/05/05 17:23

編集2019/05/06 06:27

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 を取得できずに終わるということでしょうか?

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

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 オブジェクトを取得できてないのでは? そのあたりから追いかけてみてはいかが?
guest

回答2

0

ベストアンサー

【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内にエラー(スペルミス・余分な物が混入・タグ閉じ忘れ等)が隠れていた事が多い気がします????????笑 ともあれ、良かったです????????
guest

0

ハッシュから始まっている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>

投稿2019/05/06 07:35

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gomakasu423

2019/05/07 11:31

ありがとうございます。 HTMLの記述が誤っておりました。
yambejp

2019/05/07 11:34

<div id="#about"~~> ああ、あるあるネタですね。無意識にやっちゃうことあります 質問の際にHTMLをつけてくれれば一発でわかったでしょうね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問