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>

your code is correct i have tested my wordpress can check any javascritp error is coming — Nanhe Kumar, Jul 12 '13 at 06:59

Hitesh Siddhapura · Accepted Answer · 2013-07-12T07:02:29.930

Follow below steps

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
 }

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

Thanks for the help Hitesh, but I can't seem to get it to work. I realized though, that the body tag is the background-container, so I moved the button before the closing of #blog. How do I change that in Javascript? change ('html, body') to ('html, #blog')? — michaelw90, Jul 12 '13 at 06:54

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

1 Answers1