jQuery：現在の場所から100pxダウンページをスクロールする[複製

Question

この質問にはすでに答えがあります：

• ; jQuery：現在の画面位置から100pxダウンページをアニメーション化する 3つの答え

現在の場所から100pxダウンページをアニメーション化するにはどうすればよいですか？

私のコードは機能しません：

    $('html,body').animate({
        scrollTop: $(window).position().top + 100
    })

このように、しかし、ページを特定の要素にスクロールすることなく、代わりに、Windows電流位置から100pxをスクロールします。

$('html, body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 2000);

Answer 1

Scrolltoプラグインが思い浮かびます：
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
http://demos.flesler.com/jquery/scrollto/

しかし、多分それはそのために少し過剰です:)

Answer 2

Scrolltopプロパティは、要素が上部からどこに配置されているかを示します。 window.scrollbyメソッドとwindow.scrollyプロパティを使用する必要があります。残念ながら、window.scrollyプロパティでAnimateを使用することはできません。これは読み取り専用です。

このようなものを使用できるはずです。

function animateScrollBy (x, y, interval) {
    var xpos = 0,
    ypos = 0,
    updateScroll = function () {
        var moveX = xpos <= x ? 1 : 0,
            moveY = ypos <= y ? 1 : 0;

        window.scrollBy(moveX, moveY);
        xpos += 1;
        ypos += 1;
        if (moveX === 0 && moveY === 0) {
            clearInterval(scrollInterval);
        }

    },
    scrollInterval = null;

    scrollInterval = setInterval(updateScroll, interval||1)
}

animateScrollBy(0, 100);

速度は、移動したピクセルのアムアウトに合わせてリリースされます。後で更新するために試してみます。