1. ホーム
  2. jquery

[解決済み] jQuery .scrollTop(); + アニメーション

2022-04-20 09:12:58

質問

ボタンがクリックされるとページが一番上にスクロールするように設定しました。 しかし、まずif文でページのトップが0になっていないかどうかを確認し、0になっていなければページがトップにスクロールするようにアニメートしています。

var body = $("body");
var top = body.scrollTop() // Get position of the body

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

厄介なのは、ページが一番上までスクロールした後に、何かをアニメーションさせることです。 そこで次に考えたのは、ページの位置が何であるかを知ることです。そこで、コンソール・ログを使って調べてみました。

console.log(top);  // the result was 365

この結果、365という結果が出ました。これは、一番上にスクロールする直前にいた位置の番号だと思われます。

質問ですが、位置を0に設定して、ページが0になった時点で実行される別のアニメーションを追加するにはどうすればいいのでしょうか?

ありがとうございます。

解決方法は?

そのためには、animateコマンドにコールバック関数を設定し、スクロールアニメーションが終了した後に実行されるようにします。

例えば

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

このアラートコードがある場所で、さらにjavascriptを実行して、アニメーションを追加することができます。

また、「swing」はイージングを設定するためにあるものです。チェックアウト http://api.jquery.com/animate/ をご覧ください。