ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は URL 内のハッシュ アンカー リンクをどのように検出できるのでしょうか?

JavaScript は URL 内のハッシュ アンカー リンクをどのように検出できるのでしょうか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-15 09:43:09702ブラウズ

How Can JavaScript Detect Hash Anchor Links in URLs?

JavaScript を使用して URL 内のハッシュ アンカー リンクを識別する方法

動的 Web ページを構築している場合でも、インタラクティブなウィジェットを開発している場合でも、多くの場合、これが必要になります。ハッシュ アンカー リンクのある URL とない URL を区別するため。 JavaScript でこれを実現するには、location.hash プロパティを利用できます。

ハッシュ アンカー リンクを確認する

URL にハッシュ アンカー リンクが含まれているかどうかを確認するには、次のようにします。次のコード スニペットを利用できます:

if (window.location.hash) {
  // Fragment exists
} else {
  // Fragment doesn't exist
}

location.hash プロパティは、URL の後に続く部分を返します。ハッシュ記号 (#) (ハッシュ記号自体を含む)。 URL にハッシュ アンカー リンクが存在する場合、location.hash は空ではない文字列になります。ハッシュ アンカー リンクがない場合、location.hash は空の文字列になります。

使用例

次の HTML コードがあるとします。

<a href="page.html#anchor">Go to Anchor</a>

ユーザーがこのリンクをクリックすると、ブラウザは URL「page.html#anchor」に移動します。上記の JavaScript コードを使用すると、次のように URL にハッシュ アンカー リンクが存在するかどうかを確認できます。

if (window.location.hash === "#anchor") {
  // Code to execute when the anchor exists
}

location.hash プロパティを利用することで、ハッシュ アンカー リンクの存在を簡単に判断できます。 URL に含めると、それに応じて条件付きロジックを実装できるようになります。

以上がJavaScript は URL 内のハッシュ アンカー リンクをどのように検出できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。