Q&A
動作が確認できないのでcodepenなどどこかソースを実行できるサイトにアップできませんか？
固定ヘッダーの際にアンカーリンク押下時、場所がずれて困っています。
フッダーにある大阪店のリンクをクリックしたら、section id="shop"の大阪店のところに飛んでほしいのですが、現状、大阪店の真ん中辺りに飛んでしまいます。
jQueryで処理を書いてみましたが、変わらない状況です。
alert(1);で条件の方が合っていることは確認したので、処理の方の書いていることが間違っていると思ってます。
どうしたら良いでしょうか？
HTML
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <title>タイトル</title> 7 <meta name="description" content="説明が入ります。"> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 <!-- CSSスタイルシート --> 11 <link rel="stylesheet" href="css/bootstrap.min.css"> 12 <link rel="stylesheet" href="css/style.css"> 13 </head> 14 <body> 15 16 <header id="header" class="header sticky-top"> 17 <div class="d-flex justify-content-between px-4 py-2"> 18 <a class="navbar-brand" href="index.html"> 19 <img src="img/logo.png" alt="ロゴ"> 20 </a> 21 <div> 22 <button type="button" class="btn px-4"> 23 <a class="text-dark text-decoration-none" href="">予約</a> 24 </button> 25 <button type="button" class="btn line px-4"> 26 <a class="text-dark text-decoration-none" href="">問合せ</a> 27 </button> 28 </div> 29 </div> 30 <div class="nav container-field py-2"> 31 <div class="row w-100 m-0"> 32 <li class="nav-item col-20"> 33 <a class="nav-link px-4" href="">概要</a> 34 </li> 35 <li class="nav-item col-20"> 36 <a class="nav-link px-4" href="index.html#concept">コンセプト</a> 37 </li> 38 <li class="nav-item col-20"> 39 <a class="nav-link px-4" href="index.html#title2">タイトル２</a> 40 </li> 41 <li class="nav-item col-20"> 42 <a class="nav-link px-4" href="index.html#title3">タイトル３</a> 43 </li> 44 <li class="nav-item col-20"> 45 <a class="nav-link px-4" href="index.html#shop">店舗一覧</a> 46 </li> 47 </div> 48 </div> 49 </header> 50 51 <section id="concept" class="py-3"> 52 <div class="container p-5"> 53 <h3 class="text-center pb-5">コンセプト</h3> 54 <div> 55 <p> 56 コメントが入ります。コメントが入ります。コメントが入ります。 57 </p> 58 </div> 59 </div> 60 </section> 61 <section id="title2" class="py-3"> 62 <div class="container p-5"> 63 <h3 class="text-center pb-5">タイトル２</h3> 64 <div> 65 <p> 66 コメントが入ります。コメントが入ります。コメントが入ります。 67 </p> 68 </div> 69 </div> 70 </section> 71 <section id="title3" class="py-3"> 72 <div class="container p-5"> 73 <h3 class="text-center pb-5">タイトル３</h3> 74 <div> 75 <p> 76 コメントが入ります。コメントが入ります。コメントが入ります。 77 </p> 78 </div> 79 </div> 80 </section> 81 82 <section id="shop" class="pt-3"> 83 <div class="container px-5 pt-5 pb-0"> 84 <h3 class="text-center pb-5">店舗一覧</h3> 85 <div class="d-flex justify-content-between shopContainer p-lg-5 p-3"> 86 <div id="oosaka" class="shopContents w-50 my-3"> 87 <h2>大阪店</h2> 88 <a href="https://www.youtube.com/" target="_blank"><img class="snsIcon mr-2" src="img/youtube.png" alt=""></a> 89 <a href="https://www.instagram.com/" target="_blank"><img class="snsIcon mr-2" src="img/instagram.png" alt=""></a> 90 <table class="table table-bordered bg-white"> 91 <tbody> 92 <tr> 93 <th class="py-0">T E L</th> 94 <td class="py-0">xxx-xxx-xxx</td> 95 </tr> 96 <tr> 97 <th class="py-0">営業時間</th> 98 <td class="py-0">xxx~xxx</td> 99 </tr> 100 <tr> 101 <th class="py-0">定休日</th> 102 <td class="py-0">xxx</td> 103 </tr> 104 <tr> 105 <th class="py-0">住 所</th> 106 <td class="py-0">xxxxxxxxxxxxxxxxxx</td> 107 </tr> 108 </tbody> 109 </table> 110 <button type="button" class="btn px-4"><a class="text-white text-decoration-none" href="" target="_blank">地図</a></button> 111 <button type="button" class="btn px-4"><a class="text-white text-decoration-none" href="">予約</a></button> 112 </div> 113 <div class="shopImage my-3"> 114 <img class="shopPicture" src="img/shop1.png" /> 115 <img class="shopPicture" src="img/shop2.png" /> 116 <img class="shopPicture" src="img/shop1.png" /> 117 </div> 118 </div> 119 </div> 120 </section> 121 <section id="info" class="py-3"> 122 <div class="container p-md-5 p-4"> 123 <h3 class="text-center pb-5">お知らせ</h3> 124 <div class="accordion" id="accordionExample"> 125 <div class="card"> 126 <div class="card-header bg-white py-1" id="headingOne"> 127 <h5 class="mb-0"> 128 <button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> 129 <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ 130 </button> 131 </h5> 132 </div> 133 <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> 134 <div class="card-body pl-5"> 135 お知らせ内容が入ります。 136 テキストが入ります。テキストが入ります。テキストが入ります。 137 </div> 138 </div> 139 </div> 140 <div class="card"> 141 <div class="card-header bg-white py-1" id="headingTwo"> 142 <h5 class="mb-0"> 143 <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 144 <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ 145 </button> 146 </h5> 147 </div> 148 <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> 149 <div class="card-body pl-5"> 150 お知らせ内容が入ります。 151 テキストが入ります。テキストが入ります。テキストが入ります。 152 </div> 153 </div> 154 </div> 155 <div class="card"> 156 <div class="card-header bg-white py-1" id="headingThree"> 157 <h5 class="mb-0"> 158 <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 159 <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ 160 </button> 161 </h5> 162 </div> 163 <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> 164 <div class="card-body pl-5"> 165 お知らせ内容が入ります。 166 テキストが入ります。テキストが入ります。テキストが入ります。 167 </div> 168 </div> 169 </div> 170 </div> 171 </div> 172 </section> 173 174 <footer class="footer text-white"> 175 <nav class="nav-bar py-md-5 text-nowrap"> 176 <div class="container d-flex justify-content-between"> 177 <ul id="footerShop" class="nav flex-column"> 178 <p class="pt-2">店舗一覧</p> 179 <li class="nav-item"> 180 <a class="nav-link text-white" href="index.html#oosaka">大阪店</a> 181 </li> 182 </ul> 183 <ul id="footerMainMenu" class="nav flex-column"> 184 <li class="nav-item"> 185 <a class="nav-link text-white" href="">お問い合わせ</a> 186 </li> 187 <li class="nav-item"> 188 <a class="nav-link text-white" href="">お客様の声</a> 189 </li> 190 <li class="nav-item"> 191 <a class="nav-link text-white" href="index.html#info">お知らせ</a> 192 </li> 193 <li class="nav-item"> 194 <a class="nav-link text-white" href="">採用情報/求人</a> 195 </li> 196 </ul> 197 </div> 198 </nav> 199 <div id="copyright" class="bg-white"> 200 <p class="text-center text-dark mb-0 py-md-3 py-1">© ホニャララ</p> 201 </div> 202 </footer> 203 204 <script src="js/jquery-3.6.1.min.js"></script> 205 <script src="js/bootstrap.bundle.min.js"></script> 206 <script src="js/script.js"></script> 207 </body> 208</html>
JS
1$(function () { 2 $('[href*="#"]').click(function(){ 3 alert(1); 4 var height=$("#header").height(); 5 $("body").css("margin-top", height); 6 }); 7});
下記で現状の動きが確認できます。
https://iisaniisan.github.io/test/
追記：
確認したところ、jQueryのvar heightの値はちゃんと取れていることがわかりました。
最後の
$("body").css("margin-top", height);
のbodyのところが間違っていると思うので、bodyのところをクリックした先に変更したいです。
回答1件
0
ベストアンサー
問題の原因
提示されているサンプルを見たところ 「大阪店のところに飛ぶ」という動きはちゃんとできています。
しかし他に問題があって、飛んだ後一番上までスクロールしていただいたらわかるんですけど…
ヘッダーの上にヘッダーの高さ分の空白ができちゃっています。
<body>に一度つけたmargin-topがずっとつきっぱなしだからです。
固定ヘッダーの場合の、ページスクロールの処理方法
①飛ぶ先の要素のY座標を取得する。
②（そのままそのY座標まで飛ぶと、コンテンツの一部が隠されてしまうので）①のY座標からヘッダーの高さを引いたものを求める。
③②のY座標に飛ぶようにする。
という処理を私は普段しています！
コード例
javascript
1jQuery(function($) { 2 $('a[href*="#"]').click(function() { 3 var height = $('#header').height(); // ヘッダーの高さ取得 4 var target = $(this.hash); // 指定のID名をを持つ要素を取得 5 if (!target.length) return; // 該当する要素がなければ処理を終了する 6 var targetY = target.offset().top - height; // 移動先のY座標から、ヘッダーの高さを引く 7 $("html,body").animate({scrollTop: targetY}); // アニメーションさせながら↑で求めたY座標に移動 8 }); 9}); 10
投稿2022/09/28 23:24
総合スコア2314
あなたの回答
tips
プレビュー
