Written by Kasumi

jQueryを使ってURLにアンカーを残さず、ページ内リンクさせる方法

ページ内リンクするボタンをクリックすると、URLにアンカーリンクが付与される。

アンカーリンクが残ってる事により別ページに遷移した後、ブラウザバックした時、そのアンカー位置に移動してしまう。

ページ内リンクは機能させたまま、URLにアンカーが付与されないようにしたい。

本記事ではこのような悩みを解決。

jQueryを使って解説します。

※本記事ではjQueryを使うので、実装環境にライブラリの事前準備をお願いします。

HTMLを準備

ページ内リンクするボタンはaタグを使ってるかと思います。

aタグはアンカーリンクタグなので、これを別のブロックタグ(divタグなど)に変更。

href属性(href=”アンカー名”)も削除します。

jQuery

$(function(){
  $("ページ内リンクさせるボタン要素名").click(function(){
    var target = $("アンカーリンク先のID名");
    var position = $(target).offset().top;
    $('html,body').animate({scrollTop: position}, 400);
    return false;
  });
});

上記、URLにアンカーリンクを付与せずページ内リンクさせるjQueryコード例です。

clickイベント前のセレクタに前章で指定したページ内リンクボタンの要素名を記述。

target変数の値にページ内リンク先のアンカーIDもしくはクラス・要素名を記述。

以上でスムーズスクロール+ページ内リンクされます。

まとめ

jQueryを使ってURLにアンカーを残さず、ページ内リンクさせる方法について紹介しました。

以上で解説を終わります。

目次

関連記事

jQuery

【日本語対応】Datepickerを使って予約フォームにカレンダー式日付選択を入れる方法【jQuery】

更新日:2022.09.09
1227
jQuery

jQueryを使って、checkしたinput要素の label値を取得する方法

更新日:2022.09.09
4049
jQuery

jQueryで画像読み込み完了後にイベントを実行する方法

更新日:2022.09.09
2412
jQuery

【簡単】jQueryを使って、入力中の値をリアルタイムでチェック・取得する方法

更新日:2022.09.09
3553