質問: ### 実現したいこと ページスクロールさせるときに、クリックした画像が消えるように実装したいです。 後述する「現状」4の状態を改善したいです。 ### 現状 ページスクロール自体は正常に動作しています。 画像をクリックすると以下の順に画像が展開されてしまいます。 1画像をクリック 2画像が一瞬消える 3ページスクロールされる 4画像が一瞬表示される←改善したい点 5画像が消える ### 試したこと *js* ``` $(function() { // #back-to-topを消す $('#back-to-top').hide(); // スクロールが十分されたら#back-to-topを表示、スクロールが戻ったら非表示 $(window).scroll(function() { $('#pos').text($(this).scrollTop()); if ($(this).scrollTop() > 60) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // #back-to-topがクリックされたら上に戻る $('#back-to-top a').click(function() { $('html, body').animate({ scrollTop:0 }, 500); return false; }); }); ``` 色々試したのですが、想定外の動作が起きたりと分からない状況が続き、質問させていただきました。 分かる方がいらっしゃいましたら、ご教授願います。
回答: 解決したとのことですが、scrollは文字通りスクロールするたびに発火し続けます。今のコードだとfadeIn()もしくはfadeOut()のいずれかが常に発火し続けるので処理の無駄に感じます。Flagで状態管理すると各メソッドが必要なタイミングで1度だけ発火するので処理の無駄になりません。ご検討ください。 ``` $(function() { // #back-to-topを消す $('#back-to-top').hide(); // スクロールが十分されたら#back-to-topを表示、スクロールが戻ったら非表示 var isVisibleObj = false; $(window).scroll(function() { $('#pos').text($(this).scrollTop()); if (!isVisibleObj && $(this).scrollTop() > 60) { $('#back-to-top').fadeIn(); isVisibleObj = true; } else if (isVisibleObj && $(this).scrollTop() <= 60){ $('#back-to-top').fadeOut(); isVisibleObj = false; } }); // #back-to-topがクリックされたら上に戻る $('#back-to-top a').click(function() { $('#back-to-top').fadeOut(); isVisibleObj = false; $('html, body').animate({ scrollTop:0 }, 500); return false; }); }); ```