jQueryでトップへ戻るボタンが下から出てくるアニメーションを作成したのですが、スクロール後にトップへ戻ってもボタンがなかなか消えず、十~二十数秒後に下へ消えていくようになってしまいました。

JavaScript | ホームページ作成100閲覧xmlns="http://www.w3.org/2000/svg">50

ベストアンサー

0

ご丁寧なご回答ありがとうございます。 少ないチップで恐縮ですが、 ・「今ボタンが出ているか否か」をジャッジする方法 (試したこと ・let top~を『let topBtn~』へ変更し、『let offsetPos = $('topBtn').offset().top;』『let windowHeight = $(window).height;』と記述した上でelseを『if(now < windowWidth*0.01 && offsetPos < windowHeight)』へ変更 ・プラグインをDLし、elseを『if(now < windowWidth*0.01 && $('topBtn').on('inview', function()』へ変更) ・「表示を切り替える」とは何の表示についてか 以上2点をご教授願えますでしょうか? 初歩的な質問ばかりで恐れ入ります。

ThanksImg質問者からのお礼コメント

二通りのやり方を知ることができたため、こちらをベストアンサーに選ばせていただきました。 どちらのご回答も非常に参考になりました。お二人ともご回答ありがとうございました。

お礼日時:6/21 21:58

その他の回答(1件)

0

stop()を外したのが原因です。 理屈から言うと、例えば高さ10vw→1vwに移動したとして、その間のチェックのたびに「now >= windowWidth*0.01」がトリガーしてスタックに積まれてしまうのです。 9vwでチェック +0.3秒 8vwでチェック +0.3秒 7vwでチェック +0.3秒 6vwでチェック +0.3秒 and so on....(実際はもっと細かいです) なので、stopで次のアニメーション処理が入った場合、古いスタックを削除するようにすればよいのです。 --------------------------------- if(now >= windowWidth*0.01) { top.stop(false,true).animate({'bottom': '2.5vw' }, 300); } else { top.stop(false,true).animate({'bottom': '-2.5vw' }, 300); }

ご回答ありがとうございます。 おっしゃる通りにコードを書き換えたのですが、アニメーションなしで表示/非表示されるようになってしまいました。 試したこと ・vwを「windowWidth*」での表記に書き換える (変化なし) ・.stop(false,true)のfalse,trueの組み合わせを変える (.stopのカッコ内の1番目を前者、2番目を後者とすると ・条件1と2両方の後者にtrueが入ってる組み合わせ→アニメーションなしで表示/非表示される ・条件1か2どちらかの後者にtrueが入ってる組み合わせ→後者にtrueが入っている条件のみアニメーションなしで表示もしくは非表示される ・条件1と2両方の後者にfalseが入っている組み合わせ→アニメーションは全て動くが、ページ最下部まで行かないとボタンが表示されない) 原因をご存知でしたらご教授いただけますと幸いです。