BUTTONS: HOW TO MAKE BACK TO TOP SMOOTH SLOW SCROLL

Blogger tutorial about how to make a Back to Top button - This button using a Font Awesome and JavaScript, so make sure your template have both of Font Awesome and JavaScript installed.

BUTTONS: HOW TO MAKE BACK TO TOP SMOOTH SLOW SCROLL

Features:
• Scroll to top screen.
• JavaScript version.
• Animated effects.
• Slow movements.

CSS: BACK TO TOP SMOOTH SLOW SCROLL

Add this CSS code before </head> tag:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#backtotop{position:fixed;bottom:20px;right:20px;cursor:pointer}
.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}}
@-ms-keyframes bounceIn{0%{opacity:0;-ms-transform:scale(.9)}
100%{-ms-transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.9)}
100%{transform:scale(1)}}
.ani-name{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-ms-animation-name:bounceIn;animation-name:bounceIn}
</style>
</b:if>

JAVASCRIPT: BACK TO TOP SMOOTH SLOW SCROLL

Add this JavaScript code before </body> tag:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var appended=!1,bookmark2=document.createElement("div");bookmark2.id="backtotop",bookmark2.innerHTML='<span class="ani-dur ani-name" onclick="return false;" onmousedown="resetScroller(&quot;header-wrapper&quot;);"><i class="fa fa-chevron-circle-up fa-3x"></i></span>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>600?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};var scrollY=0,distance=40,speed=24;
//]]>
</script>
</b:if>

• Change header-wrapper if your template had a different "id tag" before that.

• 600 is the height which is the scroll button will showing up at 600px.