アンカータグを利用してスムーススクロールを実装する　（df Smooth Scroll）

コンテンツの内部リンクを利用すると、ページが長い場合など見出しを設けたりして、ユーザーが簡単に目的の文章にたどり着くことが出来る。しかし、アンカータグをクリックした場合、瞬間的に移動が行われるためページ遷移した場合との差別化が難しい。そこで利用される手法がスムーススクロール。

df Smooth Scrollの優れた点は、すでにコンテンツで利用されているアンカータグでもスムーススクロールを実装できる点。HTMLヘッダ部分で下記のようにJavaScriptライブラリを呼び出しておくだけで、既存のアンカータグがスムーススクロール用のリンクとして動作するようになる。

アンカータグの記述
アンカータグをHTMLで記述する際<a name= として記述する。しかし、XHTML、XHTML Basicではname属性が利用できない。id属性ではdf Smooth Scrollが動作しないので、注意する必要がある。

アンカータグに対してスムーススクロールを実装することが出来るため、非常に便利。しかし、前述したname属性での利用に限定される点や、他のページから遷移してくる場合はスムーススクロールされない。簡単に導入できるので、試しに導入してみてはいかがだろうか？