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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

2587閲覧

スムーススクロールの位置がずれる

kotorarui

総合スコア14

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/10/08 04:28

ホームページを作成し、リンクを飛ばしたいところにid名をつけ、トップページからリンクをかけています。

しかし、リンクをクリックした際、URLが「.co.jp/+++++.html**#id名**」になる場合と「.co.jp/+++++.html**?id=id名**」になる場合が発生してしまいます。
前者だと想定している位置と少しずれた位置に飛び、後者だと思い描いていた位置に飛ぶことができます。

原因として何が考えられるでしょうか?

具体的に上記の違いが出るパターンとしては、対象のページを開いてすぐが「#id名」のままになっていることが多く、同一サイト内の別のページを開いてから再度クリックすると「?id=id名」になっていることが多いような気がします。

ブラウザは、Google Chrome、Firefox、Operaで同様の現象が見られます。
URLが「#id名」から「?id=id名」になったとしても、履歴を削除すると「#id名」に戻ってしまいます。
なぜかIEでは最初から「?id=id名」となりうまくリンクできていました。

私自身は詳しい知識がなく分からないのですが、作成した方は以下のように記述していました。
原因と対処法を教えていただければと思います。
ご回答よろしくお願いいたします。

$(function($) { $(window).load(function(){ var options = $.extend({ scrollSpeed: 1000, easing: 'swing', adjustment: -150, delayTime: 300 },options); $('[href*=#]').click(function(event){ var element = $(this); var elementHref = element.attr('href'); if(elementHref.search(/^#.+/) === 0){ var targetId = elementHref; var targetY = $(targetId).offset().top + options.adjustment; event.preventDefault(); $('html,body').animate({scrollTop: targetY},options.scrollSpeed,options.easing); }else { var hrefSplit = elementHref.split(/#/); var hrefFirst = hrefSplit[0]; var hrefLast = '#' + hrefSplit[1]; var pathname = location.pathname; var pathnameSplit = pathname.split(///); var pathNameLast = pathnameSplit[pathnameSplit.length - 1]; var hostname = location.hostname; function aHrefCheck(){ var check1 = hrefFirst.match(/https?://.[^/]+//); if(check1 === null){ return true; }else{ var check2 = check1[0].indexOf(hostname); if (check2 != -1){ return true; }else{ return false; } } } function aHrefChange(){ if (hrefFirst.indexOf(pathNameLast) != -1){ return; }else{ hrefLast = hrefLast.replace('#','?id='); elementHref = hrefFirst + hrefLast; element.attr('href',elementHref); } } if(aHrefCheck() === true){ aHrefChange(); }else{ return; } } }); var url = $(location).attr('href'); var stringMatch = url.indexOf('?id='); if(stringMatch === -1){ return; }else { var urlSplit = url.split(/?id=/); var anchorLink = '#' + urlSplit[urlSplit.length -1]; var anchorLinkTop = $(anchorLink).offset().top + options.adjustment; $('html,body').delay(options.delayTime).animate({scrollTop: anchorLinkTop},options.scrollSpeed,options.easing); } return this; }); }); コード

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

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

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

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

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

guest

回答1

0

ベストアンサー

location.hashを評価して、?id=id名と同等のロジックにはめてやればいいでしょう

sample

javascript

1<script> 2$(window).on('popstate pageshow',function(){ 3 var selector=""; 4 if(r=location.search.match(/[?&]id=(.+?)(?=&|$)/)) selector="#"+r[1]; 5 if(h=location.hash) selector=h; 6 console.log(selector); 7}); 8</script> 9<a href="?id=hoge">hoge</a><br> 10<a href="#fuga">fuga</a><br> 11<a href="?id=piyopiyo#piyo">piyo</a><br>

投稿2019/10/08 04:47

編集2019/10/08 06:37
yambejp

総合スコア114583

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

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

kotorarui

2019/10/08 05:03

ご回答いただきありがとうございます。 申し訳ありませんが、初心者のためもう少し詳しく解説していただいてもよろしいでしょうか?
yambejp

2019/10/08 06:38

sampleのようにセレクタを掴んでください
kotorarui

2019/10/11 02:57 編集

ありがとうございます。 調べながらなんとかやってきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問