やさしいアンカーリンク

【趣旨】

HTMLで、あるページ（page1.html）から別のページ（page2.html）の特定の場所にリンクさせる場合

あるページ
page1.html

<a href="page2.html#anchor">アンカーの位置へジャンプ</a>

（以降、アンカーリンクと呼びます。）

別のページ
page2.html

<div id="anchor">アンカーの場所</div>

などと記載しますが、これだとpage1から、『一瞬で』page2の特定の場所に移動してしまい、（page2のヘッダー部分が見えないだったりすると特に）ユーザーが迷子になりやすいです。
また、コンバージョンに向けてストーリーでページ遷移を設計している場合も、そのアンカーリンクでストーリーが途切れてしまい、コンバージョン率の低下を招きます。（きっと）

そこで今回はアンカーリンクで何が起ったのか、自分がどのページのどこにいるのかをユーザーに認識させる、ユーザーにやさしい方法を記載します。

【実装】

page1.html

<a href="page2.html?ancid=anchor">アンカーの位置へジャンプ</a>

page2.html

<div id="anchor">アンカーの場所</div>

（従来どおり）

jQuery

$(document).ready(function () {

    // ------------------------------

    // 別ページへのやさしいアンカーリンク

    // ------------------------------

    var url = $(location).attr('href');

    if (url.indexOf("?ancid=") != -1) {

        setTimeout(function(){

          var sp_arr = url.split("?ancid=");

          var hash   = '#' + sp_arr[sp_arr.length - 1];

          var target    = $(hash);

          var position    = target.offset().top;

          $("html, body").animate({scrollTop:position}, 400, "swing");

        }, 1000);

    }

});

【解説】（どこがやさしいの？）

アンカーリンクをクリックすると、別のページに遷移し、一瞬（1秒）ヘッダー部分を表示。
その後、アンカーの場所にスルスルと移動します。
ま〜、やさしい。

【あとがき】

久しぶりの投稿です。
新しい知見を得たらアップすると心に決めておりましたが、最近は新しい発見がなかったのだろうか。それともチャレンジしていなかっただけ？
なるべく月に１回程度はアップできるよう、センサーを張り巡らせ、チャレンジしてゆきたい所存です。
以上です。