jQueryのanimateをcss3に。

質問

下記のjQueryのanimateの記述があります。

$('html,body').animate({ scrollTop: 504 }, 4000);

これを、css3を用いたjsで書くにはどう書けば良いですか？
よろしくお願いいたします。

回答No.1

b0a0a

ページのスクロールはCSSの範疇ではありませんが
requestAnimationFrameに対応している環境で単調なスクロールであればこんな感じかと

function scrollTop(y,s){
var T=Date.now()
var X=scrollX,Y=scrollY,
y=+y||0,s=+s||1000
var F=function(){
var t=Date.now()-T
if(t<s){
scrollTo(X,Y+(y-Y)*t/s)
requestAnimationFrame(F)
}else scrollTo(X,y)
}
requestAnimationFrame(F)
}

scrollTop(504,4000)