スキップしてメイン コンテンツに移動

投稿

10月, 2014の投稿を表示しています

やさしいアンカーリンク

【趣旨】 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   = …