勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

アンカーリンクでURLに「#hoge」のようなパラメータを残さずスクロールさせる方法

  jQuery JavaScript

アンカータグをクリックしてもブラウザのURL欄に「#hoge」のようなハッシュを残さずに指定の要素までスクロールできるというコーディングデータがあった。しかも他ページからハッシュ付きのURLで遷移してきてもスクロール後にハッシュが消えるような挙動を取っており、どういう手段なのか気になったのでメモ。

 

サンプル

https://taitan916.info/sample/anchor_link/

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>アンカータグでスクロールテスト</title>
</head>
<body>
    <a href="#test1">test1</a>
    <a href="#test2">test2</a>
    <a href="#test3">test3</a>
    <div style="background-color: #f00; height: 1000px;" id="test1"></div>
    <div style="background-color: #0f0; height: 1000px;" id="test2"></div>
    <div style="background-color: #00f; height: 1000px;" id="test3"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript">
    $(function(){

        const hash = decodeURI(location.hash);
        if(hash){
            $("html, body").animate({scrollTop:$(hash).offset().top});
            window.history.replaceState(null, '', window.location.pathname + window.location.search);
        }

        $('a[href^="#"]').click(function(){
            const href= $(this).attr("href");
            const target = $(href == "#" || href == "" ? 'html' : href);
            $("html, body").animate({scrollTop:target.offset().top});
            window.history.replaceState(null, '', window.location.pathname + window.location.search);
            return false;
        });
    });
    </script>
</body>
</html>

他ページから遷移してきた際は「if(hash){」のところで、リンクをクリックした際は「$('a[href^="#"]').click(function(){」で検知しスクロールした後にpushStateでハッシュを削除している。尚、ハッシュは特に削除しなくてもいい場合は以下の形でOK。

$(function(){
    $('a[href^="#"]').click(function(){
        const href= $(this).attr("href");
        const target = $(href == "#" || href == "" ? 'html' : href);
        $("html, body").animate({scrollTop:target.offset().top});
        return false;
    });
});

 

所感

URLはできるだけシンプルな方が良い派なので今後も使っていきたいところ。

 - jQuery JavaScript

  関連記事

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

画像アップロード前の時点で画像が選択されているか確認

やりたかった事は、フォーム内で画像をアップロードする際、 ちゃんと画像がローカル ...

SNSのシェア(いいね)ボタンを設置できるjQueryプラグイン「jsSocials」の利用方法

サイト内にSNSのシェア(いいね)ボタンを設置する際、WordPressだと何ら ...

jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

jQueryでページ表示時にラジオボタンやチェックボックスにcheckedがついている場合にイベントを実行する方法

ラジオボタンやチェックボックスをチェックした際に、jQuery側で何らかのイベン ...