固定ヘッダーの際にアンカーリンク押下時、場所がずれて困っています。
フッダーにある大阪店のリンクをクリックしたら、section id="shop"の大阪店のところに飛んでほしいです。
index.htmlからだと、index.html#oosakaに飛べるのですが、headerのコンセプトを押した後concept.htmlからindex.html#oosakaに飛ぼうとすると場所がずれてしまいます。
どうしたら良いでしょうか？
concept.html
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <title>タイトル</title> <meta name="description" content="説明が入ります。"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSSスタイルシート --> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="header" class="header sticky-top"> <div class="d-flex justify-content-between px-4 py-2"> <a class="navbar-brand" href="index.html"> <img src="img/logo.png" alt="ロゴ"> </a> <div> <button type="button" class="btn px-4"> <a class="text-dark text-decoration-none" href="">予約</a> </button> <button type="button" class="btn line px-4"> <a class="text-dark text-decoration-none" href="">問合せ</a> </button> </div> </div> <div class="nav container-field py-2"> <div class="row w-100 m-0"> <li class="nav-item col-20"> <a class="nav-link px-4" href="">概要</a> </li> <li class="nav-item col-20"> <a class="nav-link px-4" href="concept.html">コンセプト</a> </li> <li class="nav-item col-20"> <a class="nav-link px-4" href="index.html#title2">タイトル２</a> </li> <li class="nav-item col-20"> <a class="nav-link px-4" href="index.html#title3">タイトル３</a> </li> <li class="nav-item col-20"> <a class="nav-link px-4" href="index.html#shop">店舗一覧</a> </li> </div> </div> </header> <section id="" class="py-3"> <div class="container p-5"> <h3 class="text-center pb-5">タイトル１</h3> <div> <p> コメントが入ります。コメントが入ります。コメントが入ります。 </p> </div> </div> </section> <section id="title2" class="py-3"> <div class="container p-5"> <h3 class="text-center pb-5">タイトル２</h3> <div> <p> コメントが入ります。コメントが入ります。コメントが入ります。 </p> </div> </div> </section> <section id="title3" class="py-3"> <div class="container p-5"> <h3 class="text-center pb-5">タイトル３</h3> <div> <p> コメントが入ります。コメントが入ります。コメントが入ります。 </p> </div> </div> </section> <section id="shop" class="pt-3"> <div class="container px-5 pt-5 pb-0"> <h3 class="text-center pb-5">店舗一覧</h3> <div id="oosaka" class="d-flex justify-content-between shopContainer p-lg-5 p-3"> <div class="shopContents w-50 my-3"> <h2>大阪店</h2> <a href="https://www.youtube.com/" target="_blank"><img class="snsIcon mr-2" src="img/youtube.png" alt=""></a> <a href="https://www.instagram.com/" target="_blank"><img class="snsIcon mr-2" src="img/instagram.png" alt=""></a> <table class="table table-bordered bg-white"> <tbody> <tr> <th class="py-0">T E L</th> <td class="py-0">xxx-xxx-xxx</td> </tr> <tr> <th class="py-0">営業時間</th> <td class="py-0">xxx~xxx</td> </tr> <tr> <th class="py-0">定休日</th> <td class="py-0">xxx</td> </tr> <tr> <th class="py-0">住 所</th> <td class="py-0">xxxxxxxxxxxxxxxxxx</td> </tr> </tbody> </table> <button type="button" class="btn px-4"><a class="text-white text-decoration-none" href="" target="_blank">地図</a></button> <button type="button" class="btn px-4"><a class="text-white text-decoration-none" href="">予約</a></button> </div> <div class="shopImage my-3"> <img class="shopPicture" src="img/shop1.png" /> <img class="shopPicture" src="img/shop2.png" /> <img class="shopPicture" src="img/shop1.png" /> </div> </div> </div> </section> <section id="info" class="py-3"> <div class="container p-md-5 p-4"> <h3 class="text-center pb-5">お知らせ</h3> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header bg-white py-1" id="headingOne"> <h5 class="mb-0"> <button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ </button> </h5> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body pl-5"> お知らせ内容が入ります。 テキストが入ります。テキストが入ります。テキストが入ります。 </div> </div> </div> <div class="card"> <div class="card-header bg-white py-1" id="headingTwo"> <h5 class="mb-0"> <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body pl-5"> お知らせ内容が入ります。 テキストが入ります。テキストが入ります。テキストが入ります。 </div> </div> </div> <div class="card"> <div class="card-header bg-white py-1" id="headingThree"> <h5 class="mb-0"> <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <time class="pr-4">20xx.xx.xx</time>〇〇のお知らせ </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body pl-5"> お知らせ内容が入ります。 テキストが入ります。テキストが入ります。テキストが入ります。 </div> </div> </div> </div> </div> </section> <footer class="footer text-white"> <nav class="nav-bar py-md-5 text-nowrap"> <div class="container d-flex justify-content-between"> <ul id="footerShop" class="nav flex-column"> <p class="pt-2">店舗一覧</p> <li class="nav-item"> <a class="nav-link text-white" href="index.html#oosaka">大阪店</a> </li> </ul> <ul id="footerMainMenu" class="nav flex-column"> <li class="nav-item"> <a class="nav-link text-white" href="">お問い合わせ</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="">お客様の声</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="index.html#info">お知らせ</a> </li> <li class="nav-item"> <a class="nav-link text-white" href="">採用情報/求人</a> </li> </ul> </div> </nav> <div id="copyright" class="bg-white"> <p class="text-center text-dark mb-0 py-md-3 py-1">© ホニャララ</p> </div> </footer> <script src="js/jquery-3.6.1.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/script.js"></script> </body> </html>
JS
jQuery(function($) { $('a[href*="#"]').click(function() { var height = $('#header').height(); var target = $(this.hash); if (!target.length) return; var targetY = target.offset().top - height; $("html,body").animate({scrollTop: targetY}); }); });
下記で現在の動きが確認できます。
https://iisaniisan.github.io/test/
0 コメント