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

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

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

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

jQuery

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

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

1回答

2597閲覧

jQuery ページ外アンカーリンクの挙動がおかしい(iPhoneのみ)

rightbrain

総合スコア3

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

jQuery

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

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2020/10/23 03:58

前提・実現したいこと

iPhoneのみアンカーリンクの挙動がおかしいです。
idで指定した箇所までページ遷移はできますが、その後スクロールしようとすると、
アンカー位置に無理やり戻ろうとして、うまくスクロールができません。
ご教示の程、宜しくお願い致します。

該当のソースコード

$(window).on('load resize', function(){ var url = $(location).attr('href'); if(url.indexOf("#") != -1){ var anchor = url.split("#"); var target = $('#' + anchor[anchor.length - 1]); if(target.length){ var pos = Math.floor(target.offset().top) - 170; } if (window.innerWidth < 767) { if(target.length){ var pos = Math.floor(target.offset().top) - 70; } } } $("html, body").animate({scrollTop:pos}, 500); });

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

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

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

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

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

guest

回答1

0

ベストアンサー

iPhoneは、スクロールすると、
ステータスバーの高さが変化するため、
window.onresizeイベントが起動します。
なので、その度に中の処理である、
URLから取得したID付き要素へスクロールする処理が発生してしまいます。

window.onloadwindow.onresizeで違う関数を使用するか、もしくは、
イベント別で処理を分けるように書くしかありません。

投稿2020/10/23 04:13

miyabi_takatsuk

総合スコア9528

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

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

rightbrain

2020/10/23 04:47

ご回答いただき、誠にありがとうございます。 そうだったんですね…!お恥ずかしながらそのようなイベントの存在自体を初めて知ることができました。 ご教示いただいた方法で試してみようと思います。 ありがとうございます!
miyabi_takatsuk

2020/10/23 06:38

質問者さんが指定している、 $(window).on('load resize', function(){ と同じです。 これは、jQueryを使用し、 window.onloadとwindow.onresizeのイベントを同時に指定するという構文になります。
miyabi_takatsuk

2020/10/23 06:40

jQueryは、あくまでJavaScriptを短く書けるようにしたもの、と覚えておきましょう。中身は結局JavaScriptが動いています。 そういうものを、ライブラリ、と言います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問