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

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

新規登録して質問してみよう
ただいま回答率
85.48%
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回答

3919閲覧

loading="lazy"とページ内リンクへのスムーススクロール(URLの#以降を表示させたくない)

KotubuKakiwa

総合スコア4

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クリップ

投稿2020/07/02 01:28

前提・実現したいこと

皆様、お世話になっております。
ページタイトルで質問内容を正確に表現できていないため、質問が長文になりますが、よろしくお願いいたします。

Chromeで挙動する画像遅延読み込みのloading="lazy"という属性を画像タグに埋め込んでいます。
それによってページ内リンクへのスムーススクロールが上手く挙動しなくなってしまいました。

js

1 $('a[href^="#"]').click(function(){ 2 var speed = 500; 3 var href= $(this).attr("href"); 4 var target = $(href == "#" || href == "" ? 'html' : href); 5 var position = target.offset().top; 6 $("html, body").animate({scrollTop:position}, speed, "swing"); 7 return false; 8 });

一般的だと思われる↑のようなコードを使用していたのですが、loading="lazy"を採用したことによって、未スクロール部分の画像の高さが0と判断され、その分だけクリック時のpositionの高さと実際のページ内リンクのIDまでの高さにズレが発生してしまい、(画像部分をたくさん通過する必要があるページ下部にいくにつれて)、意図した場所とズレたところでスクロールがとまってしまう…という減少が発生しています。
(loading="lazy"にまったく問題なく挙動するサイトもあるのですが、比較的大規模+古いサイトで、どういうわけかこの減少が発生して困っていました。)

そこで、私なりに考えまして、↓下記のような記述で応急処置をとりました。

js

1 $('a[href^=#]').click(function() { 2 var href = $(this).attr("href"); 3 var target = $(href == "#" || href == "" ? 'html' : href); 4 var position = target.offset().top - headerHight; 5 6 $.when( 7 $("html, body").animate({ 8 scrollTop: position 9 }, 400, "swing"), 10 ).done(function() { 11 var diff = target.offset().top - headerHight; 12 if (diff === position) { 13 } else { 14 $("html, body").animate({ 15 scrollTop: diff 16 }, 10, "swing"); 17 } 18 }); 19 });

おそらく、あまりスマートな方法ではないのかなとは思うのですが、一応、これでスクロール問題自体は解決しています。
ただ、タイトルにも記述しましたとおり、上記のコードですと、クリック時にURLに#IDが付与されてしまいます。

https://hoge.jp/index.html#sectionA
(↑こんな感じです。)

これをクリック時に、
https://hoge.jp/index.html
このようにIDを付与しないかたちにするためには、上記コードをどのように変更したら良いでしょうか?

何卒、よろしくお願い申し上げます。

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

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

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

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

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

Lhankor_Mhy

2020/07/02 01:48

preventDefault はダメでしたか?
KotubuKakiwa

2020/07/02 02:10

ご回答、有難うございます。 恥ずかしながら、preventDefaultを知らなかったため、試していませんでした。 whenの最後に付与することで、解決できました!
kei344

2020/07/02 04:03

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
KotubuKakiwa

2020/07/02 04:06

失礼いたしました。お二方とも、ご教示有難うございます。
guest

回答1

0

自己解決

アドバイスを頂きまして、when()内にpreventDefaultを追記することで解決できました。
皆様、有難うございました!

js

1 $('a[href^=#]').click(function(e) { 2 var href = $(this).attr("href"); 3 var target = $(href == "#" || href == "" ? 'html' : href); 4 var position = target.offset().top - headerHight; 5 6 $.when( 7 $("html, body").animate({ 8 scrollTop: position 9 }, 400, "swing"), 10 e.preventDefault(), 11 ).done(function() { 12 var diff = target.offset().top - headerHight; 13 if (diff === position) { 14 } else { 15 $("html, body").animate({ 16 scrollTop: diff 17 }, 10, "swing"); 18 } 19 }); 20 });

投稿2020/07/02 04:06

KotubuKakiwa

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問