ページ内リンクをピューっとスクロールさせるJavascriptの紹介

ページ右下によくある「このページのトップへ戻る」リンク。これは同じページの別の箇所にリンクする「ページ内リンク」というやつだ。ページ内リンクは、スクロールしたほうが良い。

一瞬で迷子になるページ内リンク

ユーザーがリンクを「ページ内リンクなのかページ外リンクなのか」を判断するには、リンク先URLを見るか、ブラウザが読み込み中になるかならないかを見極める必要がある。この見極めを誤ると、自分がどのページにいるか分からなくなり、画面をスクロールさせた挙句に、さっき見ていたページだということが分かり、「ご大層にわざわざ気を遣ってページ内に飛んでくれてすみませんね!」と、ちょっとムカつく。特に最近は、Ajaxでページがリフレッシュしなくてもコンテンツが書き換えられることもあり、より判断が難しい。縦に長いページなら、なおさらだ。だから、ページ内リンクであることをもっとユーザーに分かりやすくする必要がある。

Javascriptでスクロールするページ内リンク

Javascriptを使って、ページ内リンクをピューっとスクロールさせるヤツ。いたよね、そんなヤツ。これは、ユーザビリティ的には非常に優れていると思う。種類もいろいろあり、ページ内の指定した箇所に飛べるものから、「このページのトップに戻る」だけを実現したものまで様々だ。その中で、僕が特にお気に入りなのがこちら。

SiMPLE*SiMPLE このページの先頭へ、をちょこっとおしゃれに

僕の場合、もともと、ページ内リンクがあまり好きではないこともあり、本文の中で使用することはまずないため、こちらの非常に簡潔なコードがピッタリ。IDを指定してそこへ飛べたり、そんな機能はいりません。限りなくシンプルなのが、最高です。