jQuery
を用いて、Topへ戻るボタンを作成しています。
基本的な動作は意図した通りなのですが、別のページ(例えば、Topページからプロフィールページ)にサイト内リンクから飛ぶと、ボタンの表示は設計通りに挙動するのですが、Topに戻る部分(以下コードの$( '#move-page-top' ).click
に該当する部分)のみ何故か機能しません。
ところが、そのページでRefreshした後、ボタンをクリックすると、問題なくtopに戻ります。
何かしらの記載ミスがあるのだと思いますが、自己解決できず、ご指摘頂けますと幸甚です。
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} ) ;
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> 9
css
が悪さをしているとは思いませんが、念のため記載します。
css
1.page-top{ 2 z-index:2; 3 margin: 0 ; 4 padding: 0 ; 5 position: relative; 6 display: none; 7} 8.page-top p{ 9 margin: 0 ; 10 padding: 0 ; 11 position: fixed ; 12 right: 20px ; 13 bottom: 20px ; 14 color: white; 15} 16.move-page-top{ 17 display: block ; 18 border-radius: 5px; 19 background: rgba(0, 0, 0, 0.5); 20 width: 40px ; 21 height: 40px ; 22 line-height: 10px ; 23 text-decoration: none ; 24 text-align: center; 25 -webkit-transition:all 0.3s ; 26 -moz-transition:all 0.3s ; 27 transition:all 0.3s ; 28} 29.move-page-top:hover{ 30 opacity: 0.85 ; 31}
回答2件
あなたの回答
tips
プレビュー