Add Dorsum To Pinnacle Push Clit Inwards Blogger Weblog Amongst Smoothen Scrolling

In today’s tutorial we’ll demo y'all how to add together "back to the top" push inward blogger spider web log alongside shine scrolling inward a slow steps. The push we’re going to practise volition run across inward the bottom-right of the page as well as it appears alone when users scroll downwardly the page allowing them to scroll to the move past times of the page.

If your spider web log stimulate got a lot of information or y'all write rattling long posts as well as thence y'all must stimulate got to add together this widget inward your blogger spider web log to brand amend user experience.

[See Live Demo ##eye##]

 Note:  In the procedure a mistakes mightiness survive made, thence delight backup your template earlier making whatever changes.

Lets offset the tutorial.

Step 1. In this push nosotros are going to exercise font awesome thence nosotros postulate to add together it inward template.

 Note:  If in that place is already a font awesome library inward your template, ignore below code as well as instruct for the farther steps.

[<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>]

Step 2. To add together Back to Top push inward blogger only navigate to Blogger Dashboard >> Template >> Edit HTML as well as Search for the code ]]></ b: skin>.

Now re-create the below CSS code as well as glue it exact before   ]]></b:skin>  section.

 [#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;

}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 10px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
}]

Step 3. Now, abide by a </body> tag inward your templates as well as glue below slice of code earlier </body> tag.

[</script>
<a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a>
<script type='text/javascript'>
// ===== Back to Top ====
$(window).scroll(function() {
    if ($(this).scrollTop() &gt;= 50) {       
        $(&#39;#return-to-top&#39;).fadeIn(200); 
    } else {
        $(&#39;#return-to-top&#39;).fadeOut(200);  
    }
});
$(&#39;#return-to-top&#39;).click(function() {    
    $(&#39;body,html&#39;).animate({
        scrollTop : 0                     
    }, 500);
});
</script>]

Step 4. Finally, Save your template as well as run across the result.

Bottom Line

So, this was the slow tutorial on how to add together dorsum to move past times push inward Blogger. commonly y'all tin customize this code easily but if y'all are newbie as well as thence exercise the default code.

I promise that y'all constitute it helpful as well as I’m certain it volition practise goodness for your readers.

If y'all yet facing whatever work piece installing this widget as well as thence only drib your enquiry inward below comment box. I would honey to take away heed from y'all as well as assistance y'all out. Happy Blogging!