• jQuery

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にアンカーを残さず、ページ内リンクさせる方法について紹介しました。

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