[解決済み] 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/ をご覧ください。
関連
-
Uncaught SyntaxError: 予期しない入力の終了
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] 選択オプション「selected」を値で設定する
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
echarts-all.js:1 Uncaught TypeError: nullのプロパティ'getAttribute'を読み取ることができません。
-
[解決済み] jQueryのSELECT要素で特定のオプションを選択するにはどうすればよいですか?
-
[解決済み] jQueryでフォームフィールドをクリアする
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み] jQueryでloading spinnerを表示するには?
-
[解決済み] jQueryを使用してspanに値を設定する方法
-
[解決済み] jquery input select all on focus
-
[解決済み] jQuery OR Selector?
-
[解決済み】jQueryで入力不可属性をトグルする。
-
[解決済み】フォームのhiddenフィールドにjQueryの".val() "を使って値を設定してもうまくいかない。