###解決したいこと
ページトップまで戻っても表示、非表示を繰り返さないようにしたいです。
スクロールする方向でトップページボタンを表示したり、非表示にしたりするスクリプトを実装しているのですが、トップページボタンをクリックしてページトップまで戻ると、一度トップボタンが表示して、また非表示になるという動作となります。
コンソール表示動作を確認してみると、ページトップまで戻った時に非表示になってその後一度表示となり、また非表示となっていました。
currentPos と startPos の数値を console.log() で確認してもちゃんと動作していると思うのですが、なぜページトップまで戻った時にこのような動作となるのでしょうか。
ページトップボタンを使用しないで、スクロールだけでページトップまで戻ってもこのような現象は起きません。
コードのどのようなところを改善すれば良いのか教えて下さい。
こちらのサイトのページトップボタンです。→ http://jikkyo-webdesigner.top
###jQuery 現在のうまくいかないコード
<!--topボタンスクール上下の表示、非表示--> var topBtn = $('#top-btn'); topBtn.hide(); var startPos = 0; $(window).scroll(function(){ var currentPos = $(this).scrollTop(); if(startPos < currentPos || $(window).scrollTop() < 500){ topBtn.fadeOut(); console.log('非表示'); } else { topBtn.fadeIn(); console.log('表示'); } startPos = currentPos; });
###他に試したこと
var topBtn = $('#top-btn'); topBtn.hide(); var startPos = 0; $(window).scroll(function(){ var currentPos = $(this).scrollTop(); if(startPos <= currentPos){ topBtn.fadeOut(); console.log('非表示'); } else { topBtn.fadeIn(); console.log('表示'); } startPos = currentPos; });
if文中の
$(window).scrollTop() < 500
を削除し、
if(startPos <= currentPos)
比較演算子を < から <= に変更してみたのですが、うまく動作しませんでした。
画像右側のコンソール画面でスクロールトップボタンをクリックしてページトップまでスクロールした時の動作が確認できます。
非表示となってから表示され、また非表示となってページトップボタンが非表示となってしまいます。
サイト表示の右下に、現在はスクリプトで非表示としていますが指定範囲内に入るとページトップボタンが表示されます。
どうしたら表示の切り替えがうまくいくでしょうか。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/22 12:37
2016/12/24 06:55