JSで自動スクロールを行う方法。

質問

初めまして

JSで自動スクロールを行う方法について質問があります。
以下のようにした場合、wall から wall_2 に自動スクロールが出来るのですが
スクロールする際に、アニメーションを付加したい場合はどのようにしたらよろしいでしょうか。例えば、ゆっくりスクロールさせるにはどのようにすればよろしいでしょうか。
希望はanimate 関数を使いたいのですが、上手くいきません。。

[HTML]

<div id="wall"></div>
<div id="wall_2"></div>

[JS]

jQuery("#wall").click(function(){
$(window).scrollTop($('#wall_2').offset().top);
});

以上、よろしくお願いします。

回答No.2

fujillin · ベストアンサー

＞animate以外でもお待ちしております。
自作すればいいんでないの？

例えば、こんな感じ（全角空白は半角に）
function sample(dest){
　var duration = 500;

　var obj = document.documentElement || document.body;
　var pos = obj.scrollTop;
　var flag = dest > pos, step = (dest - pos) * 30 / duration;

　var animate = setInterval(function(){
　　pos += step;
　　if((flag && pos>=dest)||(!flag && dest>=pos)) pos = dest;
　　obj.scrollTop = pos;
　　if(pos === dest) clearInterval(animate);
　}, 30);
}

お礼

このようなコードをすっと書けるの凄いですね。
憧れます。

２回もアイディアをいただき、ありがとうございます！
感謝。

回答No.1

fujillin

コードを追いかけてはいませんが、$(winow)でanimateを行なおうとすると『ownerDocumentが未定義である』といったようなエラーがでるようです。
これからの推測ですが、DOMエレメントでないとanimateは使えないのかも知れません。

とりあえずの思いつきですが…

$("#wall").click(function(){
var div = $("<div>").css("height", 0);
var target = $("#wall_2").offset().top;

div.animate(
{ height: 1 },
{ step: function(d){ $(window).scrollTop(target * d);} }
);
});

とか。

お礼

fujillinさん、さっそく回答ありがとうございます！
なるほど、stepを使う事によってこうゆう事が出来るんですね。
更にここに、duration を加えると更に秒数の設定も出来ますね。

$("#wall").click(function(){
　var div = $("<div>").css("height", 0);
　var target = $("#wall_2").offset().top;

　div.animate(
　{ height: 1 },
　{ duration: 5000,
step: function(d){ $(window).scrollTop(target * d);} }
　);
});

他に、方法がないかも回答をお待ちしております！
animate以外でもお待ちしております。