質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

5756閲覧

jQuery スクロールトップ トップページまでスクロールすると点滅する

kotori_00

総合スコア46

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/21 13:30

編集2016/12/22 12:10

###解決したいこと
ページトップまで戻っても表示、非表示を繰り返さないようにしたいです。

スクロールする方向でトップページボタンを表示したり、非表示にしたりするスクリプトを実装しているのですが、トップページボタンをクリックしてページトップまで戻ると、一度トップボタンが表示して、また非表示になるという動作となります。
コンソール表示動作を確認してみると、ページトップまで戻った時に非表示になってその後一度表示となり、また非表示となっていました。
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)

比較演算子を < から <= に変更してみたのですが、うまく動作しませんでした。

###画像イメージ(console表示付き)
イメージ説明

画像右側のコンソール画面でスクロールトップボタンをクリックしてページトップまでスクロールした時の動作が確認できます。
非表示となってから表示され、また非表示となってページトップボタンが非表示となってしまいます。

サイト表示の右下に、現在はスクリプトで非表示としていますが指定範囲内に入るとページトップボタンが表示されます。

どうしたら表示の切り替えがうまくいくでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

完成イメージがわかりにくかったのですが、こういうことでしょうか?
fadeIn/fadeOutを切り替えるタイミングの判定が良くないようです。

修正

安全なプログラムにしました。
コンテンツが少なくページ全体が短いと、非表示、表示、非表示になってチカチカするようですよ。

修正

.stop()を入れて、fadeIn/fadeOut中に新たにfadeIn/fadeOutしようとすると前のfadeIn/fadeOutを中止するようにしました。

JavaScript

1$(function() { 2 // topボタンスクール上下の表示、非表示 3 var height = 500; 4 var topBtn = $('#top-btn').hide(); 5 6 var shown = false; // 現在の表示状態 7 var previousPos = 0; 8 9 $(window).scroll(function() { 10 var currentPos = $(this).scrollTop(); 11 console.log(currentPos); 12 // 正:下方向/負:上方向 13 var direction = currentPos - previousPos; 14 // 表示条件 15 var conditionIfShow = (direction <= 0 && currentPos >= height); 16 17 if (! shown && conditionIfShow) { 18 topBtn.stop().fadeIn(); 19 shown = true; 20 console.log('表示'); 21 } else if (shown && ! conditionIfShow) { 22 topBtn.stop().fadeOut(); 23 shown = false; 24 console.log('非表示'); 25 } 26 27 previousPos = currentPos; 28 }); 29});

投稿2016/12/21 21:36

編集2016/12/22 14:04
naomi3

総合スコア1105

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kotori_00

2016/12/22 12:37

回答ありがとうございます。 こちらのコードを使用させていただいたのですが、うまく動作を切り替えることができませんでした。 質問内容と同じ動作が現れます。 質問内容を編集したので確認いただければと思います。 コンソールでcuuretnPos、startPosの数値を一行ずつ確認したのですが、数値としては問題ありませんでした。 スクロールトップでページトップに戻った時の数値もおかしいところはなかったとおもいます。 初心者なものなので、どのような切り替えのコードが良いのか教えて欲しいです。
kotori_00

2016/12/24 06:55

ありがとうございます!!*・゜゚・*:.。..。.:*・'(*゚▽゚*)'・*:.。. .。.:*・゜゚・* このコードを使用して解決できました!
guest

0

このようにするのはいかがでしょうか?

Javascript

1$(document).ready(function () { 2 var topBtn = $('#top-btn'); 3 topBtn.hide(); 4}); 5 6$(window).scroll(function () { 7 if ($(this).scrollTop() >= 500) { 8 $('#top-btn').fadeIn(); 9 } else { 10 $('#top-btn').fadeOut(); 11 } 12}); 13 14$('#top-btn').click(function (event) { 15 event.preventDefault(); 16 var position = $('.header-wrapper').offset().top; 17 $('body,html').animate({ 18 scrollTop: position 19 }, 500); 20});

投稿2016/12/22 13:27

編集2016/12/22 14:04
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kotori_00

2016/12/24 07:03 編集

回答ありがとうございます。 こちらのコードでも質問内容の問題を解決することができました。♪───O(≧∇≦)O────♪
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問