アンカーリンクでURLに「#hoge」のようなパラメータを残さずスクロールさせる方法
アンカータグをクリックしてもブラウザの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にて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法
jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
jQueryでユーザーが編集可能な文字列をページ上に表示する際にエスケープする方法
GETパラメータを取得し、その内容をページ上に表示したいケースがあった。また、A ...
-
-
jQueryで特定のdata属性をセレクタとして指定する方法
jQueryで特定のdata属性をクリックした際に何らかのイベントを実行したかっ ...