Back to top

This PHP Code adds a Back-to-top Button using a Font Awesome Icon. The used design is used on our main blog, www.gooloo.de, and can be changed how you like. Please note, that this Code needs the Font Awesome Library to work. See more details, here.

function add_back_to_top_button() {
    ?>
    <a href="#" id="back-to-top" title="Zurück nach oben">
        <i class="fas fa-angle-up"></i>
    </a>
    <style>
    #back-to-top {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        text-decoration: none;
    }
    #back-to-top::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background-color: rgba(255, 0, 128, 0.5);
        border-radius: 50% 50% 50% 70%;
        z-index: -1;
    }
    #back-to-top i {
        color: #FFF;
        font-size: 24px;
        line-height: 40px;
        text-align: center;
        width: 40px;
        height: 40px;
        display: block;
    }
    #back-to-top:hover::before {
        background-color: rgba(255, 0, 128, 0.7);
    }
#back-to-top {
    background-image: none;
    text-decoration: none !important;
    border-bottom: none !important;
}

#back-to-top:hover,
#back-to-top:focus {
    text-decoration: none !important;
    border-bottom: none !important;
}

#back-to-top i {
    text-decoration: none !important;
    border-bottom: none !important;
}
    </style>
    <script>
    (function($) {
        $(document).ready(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() > 100) {
                    $('#back-to-top').fadeIn();
                } else {
                    $('#back-to-top').fadeOut();
                }
            });
            $('#back-to-top').click(function(e) {
                e.preventDefault();
                $('html, body').animate({scrollTop: 0}, 800);
            });
        });
    })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'add_back_to_top_button');