Smooth scrollingの実装 - ホームページ制作講座

最近は結構JavaScriptライブラリを使用して、WEBブラウザの表現がいろいろ増えてきています。

エラーダイアログがデザインされていたり、一見フラッシュなどのリッチコンテンツのような表現のものがJavaScriptで制御されていたり。

なかでもアンカータグをクリックすると、ページトップまでスムーズに移動するようなWEBサイトも割合みかけますが、今回はブラウザのスクロールバーとページスクロールを制御するJavaScriptの実装をしてみます。

ページ内スクロールをスムーズさせるJavaScriptはいくつかあったのですが、手間がかからず利用できるJavaScript『Smooth scrolling』を実装してみます。

Smooth scrollingとは、アンカータグでページ内を移動するとき、ダイレクトにアンカーポイントを表示させるのではなく、スクロールしながらリンクするアンカーポイントに滑らかに移動するためのjavascriptです。

1・『Smooth scrolling demo』から『smoothscroll.js』ダウンロード

2・ダウンロードしたsmoothscroll.jsを、HTMLページのheadタグ内に外部JavaScriptファイルとして読み込む記述をします

【例】

他にアンカータグを修正したり、ページ内に何か変更を加えることがないのでとても手軽に実装できるソースファイルです。