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

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

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

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

jQuery

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

HTML

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

Q&A

2回答

2112閲覧

ページ外リンク、ページ内リンクのアンカーリンク

buk

総合スコア53

JavaScript

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

jQuery

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

HTML

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

0グッド

1クリップ

投稿2019/12/27 08:30

メニューをインクルードしているのでのリンクをルートパスで書きたいです。
「ページ1」外のページから「ページ1の#link(アンカーリンク)」にリンクさせるとうまくいくのですが、
「ページ1」内でメニューの#link(アンカーリンク)をクリックすると、「ページ遷移時js」が発動します。
そしてページ内リンクのアニメーションが効かずにアンカーに飛ばされます。

したいことは。
リンクのルートパスのまま、ページ外リンク、ページ内リンクで固定ヘッダーのズレ分のアンカーリンクをうまく動作させたいです。

ご教授ください。

<ul id="global"> <li><a href="/demo/sample/#link">ページ1</a></li> <ul>

下記を使い

ページ遷移時js

$(function() { // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー $('a:not([href^="#"]):not([target])').on('click', function(e){ e.preventDefault(); // ナビゲートをキャンセル url = $(this).attr('href'); // 遷移先のURLを取得 if (url !== '') { $('body').addClass('fadeout'); // bodyに class="fadeout"を挿入 setTimeout(function(){ window.location = url; // 0.8秒後に取得したURLに遷移 }, 500); } return false; }); });

ページ外リンク

var headerHeight = $('#head').outerHeight(); var urlHash = location.hash; if(urlHash) { $('body,html').stop().scrollTop(0); setTimeout(function(){ var target = $(urlHash); var position = target.offset().top - headerHeight; $('body,html').stop().animate({scrollTop:position}, 500); }, 100); } $('a[href^="#"]').click(function() { var href= $(this).attr("href"); var target = $(href); var position = target.offset().top - headerHeight; $('body,html').stop().animate({scrollTop:position}, 500); });

ページ内リンク

$(function () { var headerHight = 80; //ヘッダの高さ $('a[href^=#]').click(function(){ var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす $("html, body").animate({scrollTop:position}, 550, "swing"); return false; }); });

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

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

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

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

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

guest

回答2

3

以前同様の質問に回答しました。
https://teratail.com/questions/216679

JavaScript

1 var documentUrl = location.origin + location.pathname + location.search; 2 $(document).on('click', 'a[href]', function(event) { 3 var anchor = event.currentTarget; 4 if (anchor.target !== '' && anchor.target !== window.name) { 5 return true; 6 } 7 8 var anchorUrl = anchor.protocol + '//' + anchor.host + anchor.pathname + anchor.search; 9 if (documentUrl !== anchorUrl) { 10 $('body').addClass('fadeout'); 11 setTimeout(function(){ 12 window.location = anchorUrl; 13 }, 500); 14 15 return false; 16 } 17 18 if (anchor.hash !== '') { 19 var position = $(anchor.hash).offset().top - headerHeight; // スペリング注意。 20 $('body,html').animate({ scrollTop: position }, 550, 'swing'); 21 event.preventDefault(); 22 return false; 23 } 24 });

投稿2020/01/09 09:24

x_x

総合スコア13749

kei344, s8_chu, goligo👍を押しています

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

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

2

提示されているコードより前に当該ページのパスをhrefから削除してしまえば、特にコードを変えることなく動くと思います。

js

1// 他のコードが動く前 2$( 'a[href^="' + Document.location.pathname + '#"]' ).each( function() { 3 // hrefから#より前を削除する 4} );

【Location - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Location

Location.pathname

URL のパス部分を、先頭の '/' を含めて収めた DOMString です。

投稿2019/12/28 08:47

kei344

総合スコア69348

x_x, goligo👍を押しています

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.54%

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

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

質問する

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

JavaScript

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

jQuery

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

HTML

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