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

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

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

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

jQuery

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

HTML

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

CSS

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

解決済

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

kotorarui
kotorarui

総合スコア0

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評価

0クリップ

1038閲覧

投稿2019/04/15 08:05

編集2022/01/12 10:58

初心者です。

前任の方が、別のサイト用にアンカースクロールのプログラムを以下のように作成していたものがあったので、
それを使用して作成しています。
ヘッダーが固定表示されているため、そこにかぶらないために設定が必要で、
今まで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です。
よろしくお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

jQuery

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

HTML

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

CSS

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