Javascript 我如何在Wordpress中实现回溯到顶部的粘性？

我一直在努力理解如何将本教程转换为Wordpress。我可能对Javascript做了一些错误的事情-把它放在了错误的地方或者类似的地方。。我不确定Wordpress是否已经包含了jQuery脚本

如果有人能帮我，我将不胜感激：）

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

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

$（文档）.ready（函数（）{
//显示或隐藏粘性页脚按钮
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>200）{
$（'.go top'）.fadeIn（200）；
}否则{
$（'go top'）。淡出（200）；
}
});
//设置滚动到顶部的动画
$（'.go top'）。单击（函数（事件）{
event.preventDefault（）；
$（'html，body'）.animate（{scrollTop:0}，300）；
})
});

遵循以下步骤

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

将以下代码添加到functions.php中（在上述步骤中添加相同的文件）

add_action（'wp_footer'，'add_this_script_footer'）；
函数添加\此\脚本\页脚（）{
?>
.上{
位置：固定；
底部：2米；
右：2米；
文字装饰：无；
颜色：白色；
背景色：rgba（0,0,0,0.3）；
字体大小：12px；
填充：1em；
显示：无；
z指数：999999；
}
.上：悬停{
背景色：rgba（0,0,0,0.6）；
}
jQuery（文档）.ready（函数（）{
jQuery（'body'）。追加（“”）
//显示或隐藏粘性页脚按钮
jQuery（窗口）.滚动（函数（）{
log（jQuery（this.scrollTop（））；
if（jQuery（this）.scrollTop（）>200）{
jQuery（'.go-top'）.fadeIn（200）；
}否则{
jQuery（'.go-top'）.fadeOut（200）；
}
});
//设置滚动到顶部的动画
jQuery（'.go top'）。单击（函数（事件）{
event.preventDefault（）；
jQuery（'html，body'）.animate（{scrollTop:0}，300）；
})
});
谢谢Hitesh的帮助，但我似乎无法让它工作。不过，我意识到body标记是背景容器，所以我在关闭#blog之前移动了按钮。我如何在Javascript中更改它？将（'html，body'）更改为（'html，#blog'）？您的代码是正确的我已经测试了我的wordpress，可以检查任何javascritp错误
 add_action( 'wp_head', 'load_into_head' ); 
 function load_into_head() { 
  wp_enqueue_script( 'jquery' ); //to load jQuery
 }  

    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
    }