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

スムーズスクロール機能をjavascript(jquery)を使用し実装する方法

更新日:2022.09.09
3296
jQuery

【jQuery】途中からヘッダー、ナビ、サイドバー等を追従させる方法【簡単】

更新日:2022.09.09
5064
jQuery

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

更新日:2022.09.09
8504
jQuery WordPress

【簡単に代替】Contact Form 7 Datepickerが使えなくなった?jQuery UIを使って日付選択を実装しよう

更新日:2022.09.09
7802