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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

別ページからアンカーリンク押下時、場所がずれて困っています。

iisaniisan
iisaniisan

総合スコア75

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0リアクション

2クリップ

212閲覧

投稿2022/09/29 08:53

固定ヘッダーの際にアンカーリンク押下時、場所がずれて困っています。
フッダーにある大阪店のリンクをクリックしたら、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">タイトル2</a> </li> <li class="nav-item col-20"> <a class="nav-link px-4" href="index.html#title3">タイトル3</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">タイトル1</h3> <div> <p> コメントが入ります。コメントが入ります。コメントが入ります。 </p> </div> </div> </section> <section id="title2" class="py-3"> <div class="container p-5"> <h3 class="text-center pb-5">タイトル2</h3> <div> <p> コメントが入ります。コメントが入ります。コメントが入ります。 </p> </div> </div> </section> <section id="title3" class="py-3"> <div class="container p-5"> <h3 class="text-center pb-5">タイトル3</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">&copy; ホニャララ</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/

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/09/29 09:35

こちらの質問が複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

Cocode

2022/09/29 12:13

「jQuery ページ外アンカーリンク」で検索したらすぐでてきますよー! 質問に提示されているjQueryのコードも私が書いたものですし、ご自身の努力の跡が見られません😢 ご質問の内容は検索してでてきたコードをコピペするだけで実装できるものなので、一度やってみてください! それでもうまくいかなかった場合、また質問してくださいな😃

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。