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

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

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

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

解決済

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

kotori_00
kotori_00

総合スコア46

jQuery

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

2回答

0グッド

0クリップ

4990閲覧

投稿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表示付き)
イメージ説明

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

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

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

5

ベストアンサー

完成イメージがわかりにくかったのですが、こういうことでしょうか?
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

kei344, Yasumi.Mizuki, mitsurumi, gin👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kotori_00

2016/12/22 12:37

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

2016/12/24 06:55

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

3

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

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

総合スコア14723

daisy, MensJink, gin👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kotori_00

2016/12/24 07:03 編集

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQuery

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