きっかけとなった記事は「このページの先頭へ、をちょこっとおしゃれに」。

ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。
そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。このページの先頭へ、をちょこっとおしゃれに | S i M P L E * S i M P L E

これはいいと思った。視覚効果としての楽しさもそうだが、いわゆる「ページ内リンク」の弱点をカバーしてくれるという点で好ましく思われる。というのも、ページ内リンクというやつはときに「リンクの結果自分がいったいどこに飛ばされたのかわかりにくい」からだ（「このページの先頭へ」の場合にはあらかじめどこに行くかが意識されているはずだからそれほど問題ないと思うが、それ以外の場合に）。

ユーザたちは、リンクをたどるときの明確な思考モデルを形成済みで、それはいくつかの要素に分けることができる。

1. リンクをクリックすることは、別の場所に移動する。
2. クリックすると、前にみていたページは消える。
3. 新しく読み込んだページはウィンドウに読み込まれ、前にみていたページと入れ代わる。
4. まずは、新たに読み込んだページの最上部がみえる。
5. 戻るボタンは、以前のページに戻る。

ほとんどのクリックがこのような動作をするため、ユーザたちは、ウェブがこのように機能するだろうという、強い期待値を持っている。論理的で、簡単な思考モデルだ。

ユーザたちの思考モデルの全 5 要素すべてにページ内リンクは反している。Alertbox: ページ内リンクの使用は避けよう（2006年2月21日）

とはいえ、（少なくとも作る側からすると）ページ内リンクにはページ内リンクの利点があり、そうそう簡単に手放せるものではなく、そこで前掲のギミックである。ページ内の移動の場合もともとウィンドウはスクロールしているわけだが、混乱のもとはそれが一瞬であるということだ。じっさいにスクロールしている様を見せることにより、別ページに飛んだのではなく、同じページ内を下に（あるいは上に）移動したのだとユーザーに意識させることができる。「スクロールのアニメーションに付き合う」と言っても、うっとうしいほどの時間をとられるわけではない（と私は思う）。

で、その JavaScript を導入してみようとよくよく記事を読んでみると、これは私の思っていたものとちょっと異なるのだった。まず第一にここで紹介されているスクリプトは「ページトップに戻る」場合に特化されていて、ページ内リンク一般に適用することができない。加えてわがままを言うなら、リンク部分に onclick イベントを追加しないといけないから、既存のページに適用するには手間が要る。

というわけで、ページ内リンク一般に対して適用可能なバージョンの紹介。ようやく本題。

関連記事