Popular post

About

Blog sobre diseño y desarrollo web.
Códigos o enlaces que me han sido útiles en mi trabajo como desarrolladora web :)

sábado, 14 de diciembre de 2013

Sticky “Back to Top” Button

 http://stackoverflow.com/questions/17608716/how-do-i-implement-a-sticky-back-to-top-in-wordpress

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
    }