Monday, December 22, 2014

Adding a Scroll to Top button

Scroll-to-top button is a very important part of a website. It prevents users from scrolling once they go to the bottom and want to go to the top. Now-a-days many themes provides this functionality. But if your theme does not provide this functionality then you need to go through the document and add the following codes so that you can add a scroll-to-top button in your site.
It requires File Level customization. So make sure you are using a Child Theme for that.

You need to go to Appearance > Editor > header.php and add this code above the </head> there:

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.tiwp-top').fadeIn(duration);
} else {
jQuery('.tiwp-top').fadeOut(duration);
}
});
jQuery('.tiwp-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Then you need to go to your Custom CSS and add this there:

/*-------------Scroll to top-------------*/

.tiwp-top {
    background-color: rgba(41, 178, 107, 0.4);
    border-radius: 50px;
    bottom: 20px;
    color: #000000;
    cursor: pointer;
    display: none;
    font-size: 30px;
    font-weight: 700;
    height: 50px;
    line-height: 55px;
    position: fixed;
    right: 20px;
    text-align: center;
    text-decoration: none;
    width: 50px;
}
.tiwp-top:hover {
background-color: #D298F9;
}

Then finally go to Appearance > Editor > footer.php and add the below code there to show the button:

<a href="#" class="tiwp-top">^</a>


This will add a sweet Scroll-to-top button in your site. You can enjoy with the button.