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

【簡単】スマホでよくある横スライドメニューを実装する方法【jQuery・CSS使用】

更新日:2022.09.09
5276
jQuery

webサイトにテキストコピーボタンを設置する方法【簡単】

更新日:2022.09.09
281
jQuery

csvファイルをjavascriptのライブライリjqueryを使って配列に変換し出力する方法

更新日:2022.09.09
6621
HTMLCSS jQuery

【CSS】高さ100vh指定時のスマホステータスバーを除く方法

更新日:2022.09.09
2577