blue

ページ内リンク(ID)にするするっと移動する

  • Posted by: SOMA Hitoshi
  • October 24, 2006 4:36 PM
  • web

「続・ページ内リンク(ID)にするするっと移動する」のほうで改良版のスクリプトを紹介しています。そちらも参照ください。

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

ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長~いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。
そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれる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 イベントを追加しないといけないから、既存のページに適用するには手間が要る。

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

えーと、以下に紹介するソースは私の考えたものではありません。答えはすでに先人が用意してくれていた。というか、これ、似たようなことはすでに誰かが思いついていてよさそうなものだと思い、リンクを辿っていったら案の定あった。

「このページの先頭へ、をちょこっとおしゃれに」の記事の元ネタとして紹介されているのが英文記事の「A (slightly) better technique for "Back to Top" links.」で、そのコメント欄に、「似たようなスクリプトだけど、俺はこんなのを作ったよ」と書き込まれているのがそれ。コメント内にはそのスクリプトが組み込まれたページ(およびその外部 JavaScript ファイル)へのリンクが案内されているが、じっさいに稼働しているスクリプト作者のブログであるため目当てのもの以外のスクリプトも混じっている。必要な部分だけを抜き出すと以下のようになる。

これをコピーして、「fdScroller.js」なりなんなり、外部 JavaScript として保存、HTMLからリンクを張ってやればOK。すべてのページ内リンク(ID属性で名前を与えたセクションへの移動)に「するするっとスクロールするアクション」が適用される。はず。

関連記事

トラックバック(1)

トラックバックURL: http://web-conte.com/blue/mt-tb.cgi/135

以下のリストにある記事は、当記事 " ページ内リンク(ID)にするするっと移動する " を参照しています :

タイトルの通り、ページ内リンクの移動をなめらかにするJavaScriptです。 ...

2007年1月 6日 20:08