【趣旨】 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(){ va...