How to Add Smooth Scrolling Back To Top Button To Your WordPress Blog

Unknown

Blogspot, CSS, Wordpress

Rabu, 19 Februari 2014

Belum ada komentar

Back to Top buttons are very helpful on blogs and websites. “Back To Top” button is used to facilitate the readers if the readers want to scroll the page up.

Moreover, you will be overwhelmed if the button does a nice scrolling animation when the page goes up. Suchbuttons are called smooth scrolling buttons. So here’s a tutorial of how to implement a smooth scrolling back to top button on your WordPress blog.

Here are the steps:

Step 1) Put below CSS file to your WordPress Theme’s style.css file. 

.crunchify-top:hover {
    color: #fff !important;
    background-color: #ed702b;
    text-decoration: none;
}
 
.crunchify-top {
    display: none;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 3.2rem;
    height: 3.2rem;
    line-height: 3.2rem;
    font-size: 1.4rem;
    color: #fff;
    background-color: rgba(0,0,0,0.3);
    text-decoration: none;
    border-radius: 3.2rem;
    text-align: center;
    cursor: pointer;
}

Step 2) Put below Script function to your theme’s header.php. I’m using All in One Webmaster Premium plugin which has Header / Footer section.

<!-- Crunchify's Scroll to Top Script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</script>
 
<script>            
    jQuery(document).ready(function() {
        var offset = 220;
        var duration = 500;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.crunchify-top').fadeIn(duration);
            } else {
                jQuery('.crunchify-top').fadeOut(duration);
            }
        });
 
        jQuery('.crunchify-top').click(function(event) {
            event.preventDefault();
            jQuery('html, body').animate({scrollTop: 0}, duration);
            return false;
        })
    });
</script>

Step 3) Open your theme’s footer.php file and add below line in that.

<a href="#" class="crunchify-top">↑</a>

You can check it out the same on this site. Just take a look at bottom right corner and you should see Scroll to Top button.