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

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

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

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

Q&A

1回答

5661閲覧

スクロール中は非表示になり、一番上でも非表示になる 上へボタン

yumisaiki

総合スコア10

jQuery

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

0グッド

1クリップ

投稿2019/05/13 16:59

前提・実現したいこと

jqeuyryで、スクロールしていると上へボタンが消え、決まった範囲の中で止まると表示される、少し凝った上へボタンを作りたいと思っています。
以下は、こちらで教えてもらって、スクロール中も表示される物です。

var s_old = $(window).scrollTop(); $(function(){ $("#ST-top").hide(); $("#ST-top img.active").hide(); $(window).scroll(function(){ var m = 100; var s = $(this).scrollTop(); if ((s_old < m)&&(m <= s)) {$("#ST-top").delay(2000).fadeIn(1000)} else if ((s < m)&&(m <= s_old)) {$("#ST-top").hide();} s_old = s;}); $("#ST-top").click(function(){ $("#ST-top").hide(); $("body,html").animate({scrollTop:0},800); return false}); $("#ST-top").hide(); });

htmlは次のようになっています。

<div class="scrollup"> <a id="ST-top" style="cursor: pointer; font: 12px arial; display: block;z-index:999;"> <img src="uehover.png" width="107px" height="96px" class="active" /> <img src="ue-1.png" width="96px" height="87px" class="off"/> </a> </div>

”#ST-top” をクリックすると、上へ行くボタンですが、こちらで教えてもらい、見事に動いております。
画像を2つあるのは、クリックするとhoverの画像に切り替わるという別のファンクションを書いています。

発生している問題・エラーメッセージ

しかし、これですと、スクロール中も表示が続くので、スクロール中は表示させたくないと思いました。

試したこと

こちらの記事を見て、

var isScrolling = 0 ; var timeoutId ; window.addEventListener( "scroll", function () { //ここに、$("#ST-top").hide(); // スクロールを停止して500ms後に終了とする clearTimeout( timeoutId ) ; timeoutId = setTimeout( function () { //ここの部分にif構文を書いて、表示させる場合と、そうでない場合を書く }, 500 ) ; } ) ;

発生している問題

のような物を、いろいろ書いてみたのですが、確かにスクロール中は表示がなくなり感じはよくなるのですが、読み込んだ時には非表示になりますが、、上下のスクロールをして、再度、scrollTop=0となる時に $("#ST-top").hide(); が実現できません。

何かよいアイデアがありましたら教えてください。 よろしくお願いします。

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

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

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

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

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

x_x

2019/05/14 04:37

過去に質問されたことはないようですが、「こちらで教えてもらって」というのはどういうことでしょう? 別の質問を参考にしたのであれば挙げてください。
yumisaiki

2019/05/15 13:16

https://teratail.com/questions/83769 これを見て、上のは書いたのです。 ただ、もっといいのにしたいと… 忙しくて検証する暇がなく申し訳ございません。 しばらくお待ちください
guest

回答1

0

表示される条件が
・下にスクロールして止まった時に
・m以上(100以上)
ということであれば

jQuery

1 timeoutId = setTimeout(function () { 2 var s = $(window).scrollTop(); 3 if (s_old < s && m <= s) { 4 $("#ST-top").stop(true, true).delay(1500).fadeIn(1000); 5 } else { 6 $("#ST-top").stop(true, true).hide(); 7 } 8 9 s_old = s; 10 }, 500);

https://api.jquery.com/stop/

投稿2019/05/14 01:51

編集2019/05/14 04:55
x_x

総合スコア13749

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

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

miyabi_takatsuk

2019/05/14 04:33

横槍失礼します。 delayかけた上で、stop()挟んだ方がいいかもしれませんね。(hideにも同様に)
x_x

2019/05/14 04:55

修正しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問