アンカーリンクをURLに残さないページ内リンク

2019年5月24日

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

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

<a href=”#menu01″>メニュー1</a>
<a href=”#menu02″>メニュー2</a>
<a href=”#menu03″>メニュー3</a>

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

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

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

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

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

ページ内リンクをクリックすると
http://ドメイン名.com

http://ドメイン名.com#menu01
URLにアンカーリンクが付加される

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

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

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

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

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

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

1の条件は当然ですが、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;
});
});

仕組みは、画面トップ位置0からジャンプ位置の距離を割り出し、その位置へJQueryでジャンプするというものです。しかも、既存のコーディングのまま上記のスクリプトをコピペで導入できます。

少し解説すると、return false; は、<a タグのリンク処理を無効にします。
Jqueryで該当位置へスクロールするため、<a タグリンク処理を無効にしても動作するわけです。
また<a タグリンクを無効にするため、URLにアンカーリンクが付加されないのです。

こちらの記事を参考にさせていただきました。
jQueryでスムーススクロール

※2019-5-24 : Jquery で$.browser が廃止されており、使用するとエラーになっておりました。 代わりに$. support で代用できます。

今回のレポートは以上です。
読んでいただいてありがとうございました。


Twitterでもweb集客向上、webマーケティング等についてブログの内容以外の情報発信もさせていただいております。Twitterもご覧いただければ幸いです。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。
微力ではございますが、鋭意ご対応申し上げます。

ホームページのご提案もさせていただいております