Scrolling Back To Top Button To Blogger

In case you are wondering how to add a smooth scrolling back to top button to blogger blog which moves on the side of your blog, then follow the below steps to add it easily without having to worry about load speed or jquery.

I personally hate using Jquery because it makes my blog load extremely slow, so I always prefer any script that does not have Jquery on it. This button is a very simple one that allows navigating to the bottom and top of your blog in no time.

How To Add Scrolling Back To Top Button To Blogger

Step 1: Log in to blogger.com and select your blog

Step 2: On the menu select 'Template' and then locate 'Edit HTML'.

Step 3: Using CTRL + F search for </head>

Step 4: Just above </head> paste the below code.

<br />
<style type='text/css'>
/*<![CDATA[*/
/*Back To Top*/
.scroll-button{box-sizing:border-box;font-size:1.2rem;line-height:2rem;padding:3px;width:38px;height:38px;right:20px;bottom:20px;visibility:visible;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;cursor:pointer;transition:all 1.2s;-webkit-transition:all 1.2s;-moz-transition:all 1.2s;-ms-transition:all 1.2s;-o-transition:all 1.2s;background:none;border:solid 2px rgb(210,104,211);color:rgb(249,104,211);border-radius:0%;position:fixed}
.scroll-button:hover{filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}
.scroll-button--hidden{filter:alpha(opacity=0);filter:progd:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;visibility:hidden}
/*]]>
</style>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/backtop.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
<br />

Step 5: Save template and visit your blog.

Final Words

Scrolling back to top button is very important for our blog and every blogger should try to have it enabled since it allows the reader to easily scroll to the top after reaching to any segment of the theme.

Widget Credit : MastamVan

Tweet