アンカーリンクをＵＲＬに残さないページ内リンク

2018年1月30日2019年5月24日

ページ内リンクとは、1つのページ内で該当位置へジャンプするリンクです。
通常のリンクと違うところは、同一ページ内へリンクする点です。

一般的には、以下のようなコーディングになります。

<a href=”#menu01″>メニュー１</a>
<a href=”#menu02″>メニュー２</a>
<a href=”#menu03″>メニュー３</a>

<h2 id=”menu01″>メニュー１見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<h2 id=”menu02″>メニュー２見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

<h2 id=”menu03″>メニュー３見出し</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

この内容でも特に具合が悪いというわけではないのですが、ページ内ジャンプ後ＵＲＬにアンカーリンクが付加されます。

例）http://ドメイン名.comの場合

ページ内リンクをクリックすると
http://ドメイン名.com
↓
http://ドメイン名.com#menu01
ＵＲＬにアンカーリンクが付加される

ＵＲＬにアンカーリンクが付加されても大抵の場合問題はありませんが、まれに具合の悪いケースがあります。

プログラム処理で、同一ＵＲＬを保持し続ける場合、常時アンカーリンクがキープされ続けるというような具合です。

これをＵＲＬにアンカーリンクが付加されない状態でページ内リンクを実現したいと思いました。

たくさんググっていろんな方法があったので、
採用条件を絞りました。

ＵＲＬにアンカーリンクを付加せずにページ内ジャンプを実現する方法は思いのほかたくさんありました。ただ、せっかくなので以下の条件にマッチしたものを探すことにしました。

ジャンプ後ＵＲＬにアンカーリンクが付加されないこと
既存のコーディングのまま適用できること

１の条件は当然ですが、2の条件を満たしてこそ利用価値があるというものです。
なぜなら、既存のソースにも反映させることができるからです。

該当の方法をみつけました

いろいろ探して該当条件のページ内ジャンプ処理を見つけました。
ソースは以下の通りです。

$(document).ready(function()
{
// #で始まるアンカーをクリックした場合に処理
$(‘a[href^=#]’).click(function()
{
// スクロールの速度
var speed = 400;// ミリ秒

// アンカーの値取得
var href= $(this).attr(“href”);

// 移動先を取得
var target = $(href == “#” || href == “” ? ‘html’ : href);

// 移動先を数値で取得
var position = target.offset().top;

// スムーススクロール
$($.support.safari ? ‘body’ : ‘html’).animate({scrollTop:position}, speed, ‘swing’);

// URLにアンカーリンクを付加させない
return false;
});
});