2012-02-24

JavaScriptでページのトップに滑らかにスクロールさせる

JavaScriptでページのトップにまでアニメーション付きで滑らかにスクロースするコードを書いてみました。特徴は、jQueryなどのライブラリを必要とせず、ほんの数行のプログラムだという点です。ちゃんとテストしていないから、動かないブラウザもあるかもしれません。
(function()  {
    var getScrollTop = function() {
        return document.body.scrollTop || document.documentElement.scrollTop;
    };
    var getScrollLeft = function() {
        return document.body.scrollLeft || document.documentElement.scrollLeft;
    };
    var startTime = new Date() - 0;
    var scrollInterval = setInterval(function() {
        var currTime = new Date() - startTime;
        if (currTime > 500) {
            clearInterval(scrollInterval);
            scrollTo(0, 0); 
        }
        else {
            var x = getScrollLeft() * 3 / 4;
            var y = getScrollTop() * 3 / 4;
            scrollTo(x, y);
        }
    }, 30);
})();
なんでこんなコードを書いたかというと、AndroidのWebViewに滑らかにスクロールさせるメソッドが見つからなかったからです。scrollTo(int x, int y)だと一瞬でページのトップに来てしまいます。しかし、上のコードをJavaにそのまま移植すると、スレッドの関係で問題が生じる可能性がある気がします。そこらへんはまだ検証していません。

0 件のコメント: