如何在Wordpress中實現粘性返回頁首？

我一直在試圖瞭解如何將本教程轉換爲Wordpress。我可能做錯了Javascript的地方 - 把它放在錯誤的地方或這樣..我不知道如果Wordpress已經有jQuery腳本包括或不是..如何在Wordpress中實現粘性返回頁首？

如果有人可以幫助我我倒是很感激:)

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-implement-a-sticky-back-to-top-button/?search_index=1

這是我的index.php中把靠近我的身體標記結束按鈕：

<a href="#" class="go-top">Go Top</a>

這是JavaScript這我只是在下面：

<!-- JavaScript --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     // Show or hide the sticky footer button 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 200) { 
       $('.go-top').fadeIn(200); 
      } else { 
       $('.go-top').fadeOut(200); 
      } 
     }); 

     // Animate the scroll to top 
     $('.go-top').click(function(event) { 
      event.preventDefault(); 

      $('html, body').animate({scrollTop: 0}, 300); 
     }) 
    }); 
</script>

來源

2013-07-12 michaelw90

你的代碼是正確的我已經測試了我的WordPress可以檢查任何javascritp錯誤即將 –

按照以下步驟

添加以下代碼的functions.php（進入主題文件夾）

add_action('wp_head', 'load_into_head'); 
function load_into_head() { 
    wp_enqueue_script('jquery'); //to load jQuery 
}

添加以下代碼的functions.php（同一文件到上述步驟）

add_action('wp_footer', 'add_this_script_footer'); 
    function add_this_script_footer(){ 
     ?> 
     <style type="text/css"> 
     .go-top { 
       position: fixed; 
       bottom: 2em; 
       right: 2em; 
       text-decoration: none; 
       color: white; 
       background-color: rgba(0, 0, 0, 0.3); 
       font-size: 12px; 
       padding: 1em; 
       display: none; 
             z-index: 999999; 
      } 

      .go-top:hover { 
       background-color: rgba(0, 0, 0, 0.6); 
      } 
     </style> 
     <script type="text/javascript"> 
        jQuery(document).ready(function() { 
         jQuery('body').append('<a href="#" class="go-top">Go Top</a>') 
         // Show or hide the sticky footer button 
         jQuery(window).scroll(function() { 
          console.log(jQuery(this).scrollTop()); 
          if (jQuery(this).scrollTop() > 200) { 
           jQuery('.go-top').fadeIn(200); 
          } else { 
           jQuery('.go-top').fadeOut(200); 
          } 
         }); 

         // Animate the scroll to top 
         jQuery('.go-top').click(function(event) { 
          event.preventDefault(); 

          jQuery('html, body').animate({scrollTop: 0}, 300); 
         }) 
        }); 
     </script> 
     <?php 
    }

讓我，如果發生任何錯誤

來源

2013-07-12 06:41:49

感謝您的幫助亞太區首席技術官Matt，但我似乎無法得到它的工作。我意識到，body標籤是背景容器，所以我在#blog關閉之前移動了按鈕。我該如何改變它在Javascript中？將（'html，body'）更改爲（'html，#blog'）？ – michaelw90

okey，我編輯了答案。它在我的WP中工作。 –

謝謝Hitesh，在這裏完美的工作:) – michaelw90

如何在Wordpress中實現粘性返回頁首？

回答

相關問題