Brynhildr

KeroRemote

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

JavaScriptで簡単にスムーズスクロール

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」という数値を変えれば速度が変わります。

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

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




コメントはまだありません ... ( 管理人承認制 )





... 不具合報告の際は、アプリのバージョンやOS等の動作環境の記載を御願い致します。

表記されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
当サイトはAmazon.co.jpアソシエイトプログラムに参加しています。
© 2010 IchiGeki