リモートデスクトップエンジニアのブログ。

ChromeはもちろんIEやSafariにも対応した極めてシンプルなスムーズスクロールの方法で。

ウェブサイトにスムーズなスクロールを実装しようと思って色々と調べてますと、jQueryなどの外部のライブラリで対応させたりCSSで対応させたりなど色々と見つかったんですけど、IEやSafariで動かなかったり仕組みが複雑だったりサイトの構築がめんどくさかったりでしたのでJavaScriptのみで動くのを自作しました。

以下がサンプルです。

サンプルサイト

「Menu」をクリックするとその場所までスムーズにスクロールすると思います。スクロール周りではCSSを使っていないのでJavaScriptのみでスクロールを実装しています。ホントはもっとスムーズな滑り出しとかにしたかったんですが、仕組みのシンプルさを追求してみるとこんな感じに落ち着きました。

そしてその応用例としてはこんな感じに。

応用サイト

コンテンツが増えてたり上に戻るのリンクが消えてたりですけどスクロールの仕組みは同じです。

んではソースコードの方を見ていきましょう。

サンプルサイトのJavaScriptの部分は以下の通りです。

<script type="text/javascript"> <!-- var y_left; var y; var y_target; function scroll() { y_left = parseInt(y_left >> 1); y += y_left; scrollTo(0,y); if ((y_left < 0 && y > y_target) || (y_left > 0 && y < y_target)) { setTimeout('scroll()',40); } } function scroll_start(p_target) { y_left = parseInt(document.getElementById(p_target).getBoundingClientRect().top); y = window.pageYOffset; y_target = y_left + y; scroll(); } //--> </script>

で、このJavascriptの関数を呼び出すコントロールが

<a onclick="scroll_start('menu01')">Menu1</a>

な感じで、移動する先が

<a id="menu01">Menu1</a>

な感じと、非常にシンプルな作りです。

HTMLのタグをクリックすると、関数「scroll_start」が呼び出されて、タイマーにより関数「scroll」がスクロールが完了するまでループします。

よーは、現在のスクロール位置から目的のタグの位置までの半分までスクロールするを繰り返す感じです。

あと、スクロール中は到達するまでタイマーで動きますので例えばJavaScriptのとこの「40」という数値を変えれば速度が変わります。

そんな感じで簡単にカスタマイズできますのでこんな感じでよろしければどうぞどうぞ。

ちなみにライセンスは当たり前だのパブリックドメインで。