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

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

更新日:2022.09.09
1757
HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
1243
jQuery

jQueryを使ってある要素をクリックしたら任意のリンク先に飛ばす方法

更新日:2022.09.09
1481
jQuery

【jQuery】デバイスによって条件分岐させる方法

更新日:2022.09.09
344