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

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

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

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

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

1411閲覧

jQuery 同一ページのスムーススクロールを表示サイズごとに設定したい

kotorarui

総合スコア14

JavaScript

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

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/04/15 08:05

編集2019/04/17 00:41

初心者です。

前任の方が、別のサイト用にアンカースクロールのプログラムを以下のように作成していたものがあったので、
それを使用して作成しています。
ヘッダーが固定表示されているため、そこにかぶらないために設定が必要で、
今までadjust部分の数字を変更することで、スクロール位置を変更していました。

しかし、このまま数字を変更すると、スマホ表示の際に位置がずれてしまいます。
そのため、ブラウザのサイズごとに設定ができるようにしたいです。
なにかを追加すれば設定が可能になるでしょうか?

$(function($) { $(window).load(function(){ var options = $.extend({ scrollSpeed: 1000, easing: 'swing', adjustment: -350, delayTime: 300 },options); $('[href*=#]').click(function(event){ //href属性に#が含まれている要素をクリックした時 var element = $(this); var elementHref = element.attr('href'); if(elementHref.search(/^#.+/) === 0){ //href属性が#から始まる場合(通常のスムーススクロール) 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(/#/); //href属性を"#"の前後で分割し、配列にする var hrefFirst = hrefSplit[0]; //#より前の文字列をhrefFirst var hrefLast = '#' + hrefSplit[1];//#より後の文字列を、"#"をつけてhrefLast var pathname = location.pathname; //URLのpathnameを取得 var pathnameSplit = pathname.split(///); //pathnameを"/"で分割して配列にする var pathNameLast = pathnameSplit[pathnameSplit.length - 1]; //pathnameの最後の文字列を取得 var hostname = location.hostname; //URLのhostnameを取得 function aHrefCheck(){ //"page.html#anchor","http://hostnameA/page.html#anchor","http://hostnameB/page.html#anchor"を振り分ける関数 var check1 = hrefFirst.match(/https?://.[^/]+//); //#より前の文字列に"http(s)://文字列"が含まれているか判別 if(check1 === null){ //含まれていない場合は"true"を返す return true; }else{ //含まれている場合 var check2 = check1[0].indexOf(hostname); //その文字列にhostnameが含まれているか判別 if (check2 != -1){ //含まれている場合、trueを返す return true; }else{ //含まれていない場合、falseを返す(何もしない) return false; } } } function aHrefChange(){ //"#"を"?id="に変換する関数 if (hrefFirst.indexOf(pathNameLast) != -1){ //#より前の文字列にpathnameの最後の文字列が含まれているか判別 ex."pageA.html#anchor" or "pageB.html#anchor" return; //含まれていたら何もしない }else{ //含まれていない場合、"#"を"?id="に変換する hrefLast = hrefLast.replace('#','?id='); elementHref = hrefFirst + hrefLast; element.attr('href',elementHref); } } if(aHrefCheck() === true){ //aHrefCheck関数でtrueが返ってきた時 aHrefChange(); //aHrefChangeが実行される }else{ //それ以外は何もしない(falseの時) return; } } }); //ページが読み込まれた時 var url = $(location).attr('href'); //URLのhrefを取得 var stringMatch = url.indexOf('?id='); //urlに"?id="の文字列が含まれているか判別 if(stringMatch === -1){ //含まれていない場合(-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; }); }); コード

ページの移動はなく、同一ページでの指定id名へのリンクになります。
jQueryのバージョンは1.8.2です。
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

ヘッダーの高さを入れてみては?

jQuery

1 //adjustment: -350, 2 adjustment: - $('header').outerHeight(),

https://api.jquery.com/outerHeight/

投稿2019/04/17 03:20

x_x

総合スコア13749

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

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

kotorarui

2019/04/17 05:02

ご回答いただいた通りに記述してみました。 表示サイズごとに同じ位置にリンクが飛ぶように設定できました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問