質問するログイン新規登録
JavaScript

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

jQuery

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

意見交換

クローズ

2回答

614閲覧

jQueryでスムーススクロールを実装するコードについての疑問

teratail_siw

総合スコア19

JavaScript

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

jQuery

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

1グッド

1クリップ

投稿2023/12/15 15:49

編集2023/12/15 15:52

1

1

jQueryでスムーススクロールを実装するためのコードを解説しているサイトの大半は、下記のようなコードになっています。

$(function(){ $('a[href^="#"]').click(function(){ var adjust = 0; var speed = 400; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top + adjust; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });

hrefが#で始まるa要素をクリックした場合に処理が実行されるようにしているにも関わらず、なぜhrefが空の場合を考慮する記述がなされているのでしょうか。
hrefが空の場合「hrefが#で始まるa要素」という条件に該当しないため、そもそも処理が実行されないのではないでしょうか。
いろいろなサイトを見ましたが、私が確認する限りでは全てのサイトで同様の記述がされています。

実際にhrefが空のa要素をクリックすると、スムーススクロールが実行されず一瞬でページトップに移動します。
この挙動はjQueryのコードがあってもなくても同じです。

多くの解説サイトで、hrefが空の場合を考慮する記述がされている理由をご存知の方がいれば教えていただけないでしょうか。

boya👍を押しています

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

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

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

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

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

回答2

#1

Lhankor_Mhy

総合スコア37595

投稿2023/12/16 00:48

このコード単体では意味はないと思いますが、たまに見かけるのが、

js

1var href = location.hash;

などとしてページ遷移後のスムーススクロールを共通の記述で書いてあるもので、そのあたりからミーム化したんじゃないかと。

いずれにせよ、CSS1行で対応できる今となっては、使う意味があまりないレガシーコードですので、あまり気になさらない方がいいのでは。

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

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

#2

teratail_siw

総合スコア19

投稿2023/12/16 16:03

#1
ご回答ありがとうございます。
そういった経緯があったのですね。
参考になりました。

解説サイトによっては、1行ごとにコードの解説をしているところもあるのにも関わらず、この処理が無意味であることを指摘しているサイトがなかった(私が検索した限りでは見つけられませんでした)ので疑問に感じた次第です。

おっしゃる通りレガシーコードであるため、わざわざ誰も指摘しないし、解説されているご本人もあまり深く考えずにコードを掲載しているのかもしれませんね。

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

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

最新の回答から1ヶ月経過したため この意見交換はクローズされました

意見をやりとりしたい話題がある場合は質問してみましょう!

質問する

関連した質問