javascript - 如何在 Wordpress 中实现粘性返回顶部？

Question

我一直在尝试了解如何将本教程转换为适用于 Wordpress。我可能在 Javascript 上做错了什么——把它放在错误的地方等等。我不确定 Wordpress 是否已经包含了 jQuery 脚本。

如果有人可以帮助我，我将不胜感激:)

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

这是我放在 index.php 中 body-tag 末尾附近的按钮：

<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>

Answer 1

请按照以下步骤操作

1. 将以下代码添加到functions.php（进入主题文件夹）

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

2. 将以下代码添加到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
       }
   

如果发生任何错误，请告诉我