スムーズスクロールでページ内リンクを分かりやすく

ページ内リンクは一瞬で移動するため、気付きにくいことも

ページ内リンクをクリックすると、たいていのブラウザでは一瞬でリンク先の位置へ移動します。 そのため、似たような構造が続くページの場合、移動したことに気づきにくいことがあります。 また、細かな項目がたくさんあるページでは、一画面内に複数の項目が表示されてしまい、具体的にどこへ移動したのかが分かりにくいこともあります。

今回は、それらの問題を解決する方法として、以下の2つの方法をご紹介致します。

1. スムーズスクロールを実現するスクリプト
2. 「ページ内リンクのリンク先」になった場合のみ、装飾を変更するCSS

この2点を活用すると、分かりやすい「ページ内リンク」を作ることができます。両方を同時に使うこともできますし、どちらか片方だけを使うこともできます。

移動が視覚的に分かりやすい「スムーズスクロール」スクリプト

ページ内リンクの移動を、（一瞬で飛ぶのではなく）なめらかにアニメーションのような感じでスクロールさせるスクリプトがあります。このスクリプトを利用すると、ページ内リンクをクリックした際に、「移動した事実」が視覚的に分かりやすくなります。

このようなスムーズスクロール機能を提供するスクリプトはいくつかありますが、本記事では kryogenix.orgで公開されている smoothscroll.js というスクリプトを例としてご紹介致します。

どこがリンク先なのかを明示できる :target疑似クラス（CSS3）

また、CSS3で追加された :target疑似クラスを使うと、「ページ内リンクのリンク先になった場合」のみに、装飾を変化させることができます。 この装飾を使えば、リンク先がどこなのかをハッキリと明示できます。例えば右図のように、「通常は黒色で表示」しつつ、「リンク先になった場合のみ赤色で表示」する、といったことも簡単に実現できます。

スムーズスクロールと:target疑似クラスを使ったサンプル

表示例として右図のようなサンプルページを用意しました。ブラウザで閲覧して、効果を試してみて下さい。
→スムーズスクロールと:target疑似クラスを使ったサンプルページ

サンプルページ内にある「ページ内リンク」をクリックすると、該当箇所までアニメーションのような効果を伴ってスムーズにスクロールします。 また、リンク先の該当項目を強調表示（項目名を赤色に、文章の背景を淡い黄色に）することで、どこがリンク先なのかを分かりやすく表示します。

それでは、まずは、スムーズスクロールを実現するJavaScriptから使ってみましょう。