jQuery
を使用し、ボタンを押すとTopに戻る機能を実装しています。
ページtopではボタンが表示されない様にしたい(スクロールすると、ボタンが出現)としたいのですが、ページTopに表示されてしまいます。
一度スクロールして、上部に戻ると、ページTopに戻っても、ボタンは表示されません。(それはOK)
が、ページをrefreshするとやはり表示されてしまいます。
誤りをご指摘頂けますと助かります。
javascript
1var syncerTimeout = null ; 2 3$( function() 4{ 5 $( window ).scroll( function() 6 { 7 if( syncerTimeout == null ) 8 { 9 syncerTimeout = setTimeout( function(){ 10 var element = $( '#page-top' ) ; 11 var visible = element.is( ':visible' ) ; 12 var now = $( window ).scrollTop() ; 13 var under = $( 'body' ).height() - ( now + $(window).height() ) ; 14 15 if( now > 200 ) 16 { 17 if( !visible ) 18 { 19 element.fadeIn( 'fast' ) ; 20 } 21 } 22 else if( visible ) 23 { 24 element.fadeOut( 'fast' ) ; 25 } 26 syncerTimeout = null ; 27 } , 1000 ) ; 28 } 29 } ) ; 30 $( '#move-page-top' ).click( 31 function() 32 { 33 $( 'html,body' ).animate( {scrollTop:0} , 'slow' ) ; 34 } 35 ) ; 36} ) ; 37
html
1<div id="page-top" class="page-top"> 2 <p> 3 <a id="move-page-top" class="move-page-top"> 4 <i class="fa fa-chevron-up fa" aria-hidden="true" style="color:white;margin-bottom:0.5rem"></i> 5 TOP 6 </a> 7 </p> 8 </div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/12 12:28