How do I implement a sticky Back to Top in Wordpress?

Question

I've been trying to understand how I can convert this tutorial to go for Wordpress. I'm probably doing something wrong with the Javascript - putting it in the wrong place or such.. And I'm not sure if Wordpress already has jQuery script included or not either..

If anyone could help me out I'd be grateful :)

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

This is the button which I'm putting near the end of my body-tag in index.php:

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

And this is the Javascript which I'm putting just below:

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

Follow below steps

1. add following code into functions.php (into theme folder)

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

2. Add following code into functions.php (same file into above step)

       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
       }
   

Let me if any error occurs