読者です 読者をやめる 読者になる 読者になる

ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

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ファイルとして読み込む記述をします


【例】


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


Smooth scrolling demo 【配布元】
http://www.kryogenix.org/code/browser/smoothscroll/