Q&A
headerを固定してないのなら、JavaScriptではなくCSSでできるのではないのでしょうか？以下のサイトで作成してみました。
https://codepen.io/kai0310/pen/PowMzjO
ちなみに、当方で確認してみましたが、確認できませんでした。
https://codepen.io/kai0310/pen/OJPKXmz
###困っていること
https://haniwaman.com/page-link-position/
上のページのコードをお借りして下のようなページを作りました。
html
1 2 3<!DOCTYPE html> 4 5<html> 6 <head> 7 <link rel="stylesheet" href="./test.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 9 </head> 10 <body> 11 12 13 <a href="#id1">見出し1</a> 14 15 16 17 <h2 id="id1">小見出し</h2> 18 <script src="./script.js"></script> 19 </body> 20</html> 21
css
1body { 2 height: 1500px; 3} 4
jQuery
1jQuery( window ).on( 'load', function() { 2 id = location.hash; 3 speed = 0; 4 headerHight = 128; // 固定ヘッダーの高さ 5 if ( '' != id ) { 6 pos = jQuery( id ).offset().top - headerHight; 7 jQuery( 'html' ).animate({ scrollTop: pos }, speed ); 8 } 9});
このとき、「見出し１」から「小見出し」に飛んだときページ内で紹介されているようなロード後小見出しが下にずれる挙動になりません。原因はなんでしょうか？
問題箇所だけ抜き出した仮のコードなのでできればJavaScriptで解決したさはあります。
また、確認できなかったとのことですが、僕の方ではそのリンクでも正しい挙動が確認できませんでした…（小見出しにとんでもその後何も起こらない）
失礼。
勘違いしていた様です。
回答2件
0
たとえば、javascriptを反映させず urlにハッシュを付けてアクセスするだけで、ジャンプしてくれます.speedを0とされているので、固定ヘッダーがない場合、javascript使う意味がないように思います。
参考としては、jQueryのanimateを調べてみてください。durationという値が0に指定されているということになります。細かいことを言うとspeedという命名をされていますが、実際は数字が大きくなればなるほど遅いアニメーションになります。
例
https://www.xxxxx.com/xxxxxx/XXXXX.html#id1
・方法１ : javascriptを読み込まないようにし、ハッシュ付きurlにアクセスします。上記例のURLのように、最後にハッシュ（#id1)を付ける。参考サイトではこれを前提に書かれている。そして、ご掲示のjavascriptの処理を反映させない。下記では、javascriptファイルを読み込んでいません。
html
1<!DOCTYPE html> 2 3<html> 4 <head> 5 <link rel="stylesheet" href="./test.css"> 6 </head> 7 <body> 8 9 10 <a href="#id1">見出し1</a> 11 12 13 14 <h2 id="id1">小見出し</h2> 15 16 </body> 17</html> 18
次に、そもそも、javascript(今の場合、jQueryと記載されたもの)の記述では、固定ヘッダーがないのに固定ヘッダーの値が設定されているので、ご掲示のコードだとジャンプ先が近いため負の値になり、動かないように見えるということです。
・方法2
固定ヘッダーがないので、固定ヘッダーに対する記述を削除する。アクセスは方法１と同様。
jQuery
1jQuery( window ).on( 'load', function() { 2 let id = location.hash; 3 let speed = 0; 4 if ( '' != id ) { 5 let pos = jQuery( id ).offset().top; 6 jQuery( 'html' ).animate({ scrollTop: pos}, speed ); 7 } 8});
固定ヘッダーをのちに追記するのであれば、headerHightについての記述を元に戻すとよいです。もちろん高さは任意で決めるなり、動的に取得するなりしてください。
方法1,2は同時に反映させても意味がないので注意です。方法１が有効になります。方法２はご掲示のコードのjQueryだけ書き換えた場合と考えてください。
ただし、jQueryのanimateの動作については個人的に詳しくありません。
最後に、Webの開発では、必ずブラウザの機能であるデベロッパーツールを使い、動かしているコードをチェックしましょう。ブラウザを立ち上げて確認したいwebページを開き"F12"を押すと使えるようになります。
デベロッパーツールの使い方はネット上で調べてください。
検索例 firefox デベロッパーツール デバッグ
ほかに質問内容と関係ない細かいこともありますが、とにかくコードを参考にするのは良いですが、１行１行何をしているのか説明文が書けるくらいに理解す
投稿2020/02/05 03:18
総合スコア46
0
setTimeout() で改善しますが、この場合は変数の値を少し増やすだけでいいかと思います。
JavaScript
1 //speed = 0; 2 speed = 16;
投稿2020/02/03 04:44
総合スコア13749
すみません、治りませんでした。ページ内リンクにとんでも特にその後小見出しがずれたりということが起こりません。
もしかして「同じページ内」のリンクを想定していますか？
参考サイトにある通り「ページ遷移時」限定の話ですよ。
あなたの回答
tips
プレビュー
