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

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

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

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

Q&A

解決済

2回答

2181閲覧

スクロールトップ jquery javascript

naue

総合スコア10

jQuery

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

0グッド

0クリップ

投稿2016/04/08 01:36

jqueryでスクロールトップを実装しています。
フッター位置に来た時に、
アイコンをフェードアウトさせたいのですが、現状フェードアウトせずに普通に消える状態です。

***********ソースコード

jquery

1<script> 2 $(document).ready(function(){ 3 $("#pagetop").hide(); 4 // ↑ページトップボタンを非表示にする 5 $(window).on("scroll", function() { 6 if ($(this).scrollTop() > 100) { 7 // ↑ スクロール位置が100よりも小さい場合に以下の処理をする 8 $('#pagetop').fadeIn(); 9 // ↑ (100より小さい時は)ページトップボタンをフェードイン(スライドダウン) 10 } else { 11 $('#pagetop').fadeOut(); 12 // ↑ それ以外の場合の場合はフェードアウト(スライドアップ)する。 13 } 14 // フッター固定する 15 scrollHeight = $(document).height(); 16 // ドキュメントの高さ 17 scrollPosition = $(window).height() + $(window).scrollTop(); 18 // ウィンドウの高さ+スクロールした高さ→ 現在のトップからの位置 19 footHeight = $(".footer").innerHeight(); 20 // フッターの高さ 21 if ( scrollHeight - scrollPosition <= footHeight ) { 22 // 現在の下から位置が、フッターの高さの位置にはいったら 23 // "#pagetop"のpositionをabsoluteに変更し、フッターの高さの位置にする 24 $("#pagetop").css({ 25 "position":"absolute", 26 "bottom": footHeight 27 }); 28 } else { 29 // それ以外の場合は元のcssスタイルを指定 30 $("#pagetop").css({ 31 "position":"fixed", 32 "bottom": "30px" 33 }); 34 } 35 }); 36 // トップへスムーススクロール 37 $('#pagetop').click(function () { 38 $('body,html').animate({ 39 scrollTop: 0 40 }, 500); 41 // ページのトップへ 500 のスピードでスクロールする 42 return false; 43 }); 44 }); 45 </script> 46 47 48```css 49#pagetop { 50 position: fixed; 51 bottom: 30px; 52 right: 30px; 53 z-index: 10; 54 cursor:pointer; 55 opacity:0.8; 56} 57 58```html 59<span id="pagetop"> 60 <img src="spimg/btn_top.png" alt="page top"> 61</span> 62 63 64###試したこと 65$("#pagetop").css({ 66 position":"absolute", 67 "bottom": footHeight 68}); 6970$('#pagetop').fadeOut(); 71などやってみましたがうまく実装できませんでした。 72 73今のスクリプトのどこかを変更する事で実装は可能なのでしょうか? 74よろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

スクロールの度に実行されるとしたら、フェードアウト処理自体も何度も実行されちゃってませんか?
フェードアウト中は2回目以降の処理をしない、というふうにしたら動いたりしないでしょうか。
(あと、ぱっと見処理負荷が高そうなので、もう少し軽量化したほうがいいかなと思いました)

投稿2016/04/08 04:31

edo_m18

総合スコア2283

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

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

naue

2016/04/08 04:55

edo_m18様 ご回答ありがとうございます。 なるほど、何度も処理されているので点滅しているということなのですね。 助言を参考に、一度きりの処理でoneメソッドを使って下記のように書いてみましたが、 アイコンは消えずに表示されたままでした。 $("#pagetop").css({ position":"absolute", "bottom": footHeight }); ↓ $('#pagetop').one( "scroll",function() { $('#pagetop').fadeOut(1000); }); 引き続き助言の方よろしくお願い致します。
edo_m18

2016/04/08 05:17

あ、スクロール自体は継続して監視しないとならないので `one` だとダメですね。 フェードイン・アウトが複数回呼ばれるのが問題じゃないかな、という話でした。 なので、試しにフェードイン・アウトが一度だけ実行されるようにしてみてうまく動けばそれが原因だと思います。
guest

0

fadeOut([speed], [callback]) - jQuery 日本語リファレンス

アニメーション効果は指定したスピードで実行されます。
速度は、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。

"slow"やミリ秒単位の値を指定してみたらどうでしょう?

投稿2016/04/08 01:49

tkturbo

総合スコア5572

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

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

naue

2016/04/08 03:18

tkturbo様 ご回答ありがとうございます。 スピードも指定してみたのですが、今の書き方、 または試した場所に書くとそもそもフェードアウトの挙動にならないようなのです。 (試した場所に書くと点滅?する挙動になってしまいます。) 他に何か思いつくことがあればまたご教授お願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問