How To Add Top Button for Your Blog With Smooth Scroll For Blogger

{[["☆","★"]]}

[tintuc]

With Smooth Scroll then you will be able to create the scroll button on the top of the blog is very smooth.With jQuery you can have the button hidden until the page is scrolled.When clicked the page scrolls smoothly to the top instead of the direct jump a regular link would have. We will add a button sẽ only be visible when the reader starts scrolling and then when chúng click it the page slowly scrolls up easing into position at the top.

1. Login to your Blogger account
2. Click Template
3. Select Edit HTML
4. Find (Ctrl F) & Insert the below CSS code just before ]]></b:skin>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px; /*Position of button. To move the button to the left of your blog change right:10px; to left:10px;*/
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJM-qBp3mVWTN3TYSa98tQ376ZK3uLYbsBz9yY1t2TJKwCVgizVUb4K_87_FenVx_X0RsddkxYYJelAG0H_wujoUjBDNJQL6jgxXATUxc7ctHtBnSH9NevyXTSji_F1AYkX-8xSzQmBo/s1600/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJM-qBp3mVWTN3TYSa98tQ376ZK3uLYbsBz9yY1t2TJKwCVgizVUb4K_87_FenVx_X0RsddkxYYJelAG0H_wujoUjBDNJQL6jgxXATUxc7ctHtBnSH9NevyXTSji_F1AYkX-8xSzQmBo/s1600/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}

5. Find (Ctrl F) & Insert the below code just before </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/

$().UItoTop({ easingType: &#39;easeOutQuart&#39; });

});
</script>

6. Save your template.

You are done...

Source: spiceupyourblog.com[/tintuc]