jQueryでURLアンカーを取得する

JavaScriptでURLからアンカーを取得する方法

jQueryを使ってURLからアンカーを取得する方法について説明します。アンカーとは、URLの末尾にある#以降の文字列のことです。

URLを取得する

まず、現在のURLを取得します。これは、window.location.hrefプロパティを使用することで可能です。

var url = window.location.href;

アンカー部分を取得する

次に、URLからアンカー部分のみを抽出します。これは、substring()メソッドを使用して、#以降の文字列を取得することで実現できます。

var anchor = url.substring(url.indexOf('#') + 1);

アンカーを使用する

最後に、取得したアンカーを使用します。例えば、特定の要素のスクロール位置を調整する場合には、scrollTop()メソッドを使用することができます。

$('html, body').animate({
    scrollTop: $(anchor).offset().top
}, 500);

完整的示例

$(document).ready(function() {
    var url = window.location.href;
    var anchor = url.substring(url.indexOf('#') + 1);

    if (anchor) {
        $('html, body').animate({
            scrollTop: $(anchor).offset().top
        }, 500);
    }
});

コード解説

コード1: jQueryでURLアンカーを取得する

$(document).ready(function() {
    var url = window.location.href;
    var anchor = url.substring(url.indexOf('#') + 1);

    if (anchor) {
        $('html, body').animate({
            scrollTop: $(anchor).offset().top
        }, 500);
    }
});

解説

1. $(document).ready(function() {})
   ドキュメントが読み込まれた後に実行される関数を定義します。
2. var url = window.location.href;
   現在のURLを取得し、url変数に格納します。
3. var anchor = url.substring(url.indexOf('#') + 1);
   
   • url.indexOf('#')でURL中の#の位置を取得します。
   • + 1で#の次の文字から始まる部分を取得します。
   • substring()で#以降の文字列を抽出します。
4. if (anchor)
   アンカーが存在する場合にのみ実行されます。
5. $('html, body').animate({ ... })
   
   • $('html, body')でHTML要素とボディ要素を取得します。
   • animate()でスクロールアニメーションを実行します。
   • scrollTop: $(anchor).offset().topで、アンカーのオフセットトップ（要素の上端からの距離）までスクロールします。
   • 500はアニメーションの時間をミリ秒で指定しています。

$(function() {
    var url = window.location.href;
    var anchor = url.hash.substr(1);

    if (anchor) {
        $('html, body').animate({
            scrollTop: $(anchor).offset().top
        }, 500);
    }
});

1. var anchor = url.hash.substr(1);
   
   • url.hashでURLのハッシュ部分（#以降の文字列）を取得します。
   • substr(1)でハッシュ部分の先頭の#を除いた文字列を取得します。
2. $('html, body').animate({ ... })
   コード1と同じです。

jQueryでURLアンカーを取得する代替方法

location.hashプロパティを使用する

この方法は、URLのハッシュ部分（#以降の文字列）を直接取得します。

$(function() {
    var anchor = location.hash.substr(1);

    if (anchor) {
        $('html, body').animate({
            scrollTop: $(anchor).offset().top
        }, 500);
    }
});

正規表現を使用する

正規表現を使ってURLからアンカー部分を抽出することもできます。

$(function() {
    var url = window.location.href;
    var anchor = url.match(/#(.*)$/)[1];

    if (anchor) {
        $('html, body').animate({
            scrollTop: $(anchor).offset().top
        }, 500);
    }
});

URLSearchParamsオブジェクトを使用する

URLSearchParamsオブジェクトは、URLのクエリ文字列を解析するためのオブジェクトです。アンカー部分もクエリ文字列の一部として扱えるため、このオブジェクトを使用して取得することもできます。

$(function() {
    var urlParams = new URLSearchParams(window.location.search);
    var anchor = urlParams.get('anchor');

    if (anchor) {
        $('html, body').animate({
            scrollTop: $(anchor).offset().top
        }, 500);
    }
});

これらの方法は、いずれもURLからアンカーを取得する機能を提供します。状況に応じて適切な方法を選択してください。

注意

• URLSearchParamsオブジェクトは、クエリ文字列を解析する際に便利です。
• 正規表現を使用する場合は、正規表現の構文に注意してください。
• location.hashプロパティは、URLのハッシュ部分のみを取得します。