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}); 69↓ 70$('#pagetop').fadeOut(); 71などやってみましたがうまく実装できませんでした。 72 73今のスクリプトのどこかを変更する事で実装は可能なのでしょうか? 74よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/08 04:55
2016/04/08 05:17