動的に切り替わる指定座標へ、スムーススクロール

質問

window.scrollTo("0",Y);で、
ウインドウを指定位置に移動させているのですが、
これをスムーススクロール対応するには、
どうすればよいでしょうか？

Yは、指定座標（モニタ上の絶対位置）で、
任意のタイミングで、動的に取得してます。

イメージとしては、
関数みたいなのに、Y座標を渡して、
その都度、スムーススクロールさせるような使い方を想定してます。

jQueryとか、プラグインを使ってもいいですが、
なるべくシンプルに行きたいと思ってます。

また、結果的に、ページ内リンクも、スムーススクロールすることになったとしても別に構いませんが、
やりたいのは、リンクをスムーススクロールすることではなくて、
「動的に、都度切り替わる、Y座標へ、スムーススクロールしたい」ってことです。

難しいようであれば、
厳密なスムーススクロールじゃなくても、
何となくそれっぽく見えれば構いません。

回答No.1

fujillin · ベストアンサー

＞これをスムーススクロール対応するには、
＞どうすればよいでしょうか？
いきなり目的のY座標の位置を表示するのでなく、アニメーション的に順次Y座標に近づくように表示してあげればよろしいかと。

簡単な原理のサンプル。
（速度を変えたり、イージングをつけるなどはご自分でどうぞ）

function smoothScroll(y){
//現在のy座標を取得
var top = (document.compatMode=='CSS1Compat'?document.documentElement:document.body).scrollTop;
var step = Math.max(1, (Math.abs(y - top)/30 | 0));
step *= y>top?1:-1;

//スクロール処理
var id = setInterval(function(){
top += step;
if((step>0 && top>y) || (0>step && y>top)) top = y;
window.scrollTo(0, top);
if(y==top) clearInterval(id);
}, 30);
}

お礼

「回答」＆「コード作成」ありがとうございました。
勉強になりましたー