この記事は賞味期限切れです。（更新から1年が経過しています）

$.scrollTo() は、ページあるいは要素の中身をアニメーションでスクロールしてくれる、よくある関数です。

$.scrollTo(dest, offset, options, selector)

使い方

// ページの先頭に戻る
$.scrollTo(0);

// "#destination" 要素の40px上に1秒かけてスクロールする
$.scrollTo("#destination", -40, {
    duration: 1000
});

// "#section-01" の位置まで移動して、完了時に location.hash を書き換える
$.scrollTo("#section-01", 0, {
    done: function(){
        location.hash = "#section-01";
    }
});

// #scrollArea の中身を、#destPosition の位置までスクロールする
$.scrollTo("#destPosition", 0, null, "#scrollArea");

• 到達点の指定（第一引数）は、数値かセレクタで渡します。
• 非数値である場合は、セレクタとみなしてその要素の位置までスクロールします。
• options はjQueryのanimate関数にそのまま渡されます
• 第四引数は、スクロールをする要素のセレクタです。（デフォルトは “html,body”）

なお、縦スクロールの事しか考えていない点はご容赦ください。

注意したい点

ページ内にある要素（”html,body” ではない要素）のスクロールをおこなう場合は、 その要素の position は “static” 以外でないといけない点に注意が必要です。 コンテキストを生成しないと親のコンテキストから位置を計算してしまうので、到達点の計算がズレズレになってしまいますね。 （到達点を数値で指定する場合はその限りではありません）

コード

$.scrollTo = function(dest, offset, options, selector){
    if($.type(dest) !== "number"){
        dest = $(dest)[selector === void 0 ? "offset" : "position"]().top;
    }
    offset = offset || 0;
    options = options || {};
    selector = selector || "html,body";
    $(selector).animate({
        scrollTop: dest + offset
    }, options);
};