2012年12月21日(金) 13時03分05秒 [仕事]

スムーズスクロールスクリプトと:target疑似クラスでページ内リンクを分かりやすくする方法

ウェブページにある「ページ内リンク」をクリックすると、たいていは一瞬でリンク先のポイントへ移動します。
すると、どれくらい移動したのかが把握しにくかったり、ページの構成や内容によっては「移動した事実」にすら気付きにくいこともあります。

そこで「ページ内リンク」を作る際にお勧めなのが、以下の2点、

• スムーズに（アニメーションするように）リンク先アンカーポイントまでスクロールさせる「スムーズスクロール」スクリプトと、
• リンク先がどこなのかを明示できる（＝リンク先アンカーポイントに限定して装飾を変更できる）CSS3の「:target疑似クラス」

です。
この2つを使うと、「ページ内リンク」をクリックした際に、ページ内のどこへ移動したのかがとても分かりやすくなります。
そんな「スムーズスクロール」スクリプトと、CSS3の「:target疑似クラス」の使い方を解説した記事をAll Aboutで公開。

◆『スムーズスクロールでページ内リンクを分かりやすく』（＠All About ホームページ作成）

サンプルページもあるので、ぜひ試してみて下さい。