Do you already know what it is back to top button , this button is a shortcut to see goto top of the blog without the need to laboriously using the scroll , this button is very useful if you frequently post articles are very long lol ...Now you already know what it's back button top , but why must be made bouncing , actually just to give the impression of professional course on this blog bouncing anda.efek bbelum many pairs now known bloggers so that your blog is different from other blogs.
without any lengthy direct us to the stage of manufacture .
The first step is to open edit html in your template and then locate the code < / head> and copy and paste code below and then place it on top.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
you can skip this step if your template is mounted button back to top .
The next copy and paste the code again below the above code < / head>.
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
Then select a layout for the new widget >> >> then select HTML / Javascript on the title let it remain empty, copy and paste the code below into it.
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMD8a86TkWy2Dk21quz-c8WVQYySP5E836236gT0Y5_W2lyE_oGQJ76OXjEod8xH8Msh12zk1LsonKIjgcU0_w11qV2ps368qyGtKNd96sP-SBcpV24_QCFKL7ds-s_KtoVXE8VBJVsW1/s1600/arrow-up_basic_blue.png'/></div>
Then click save and see the results.
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMD8a86TkWy2Dk21quz-c8WVQYySP5E836236gT0Y5_W2lyE_oGQJ76OXjEod8xH8Msh12zk1LsonKIjgcU0_w11qV2ps368qyGtKNd96sP-SBcpV24_QCFKL7ds-s_KtoVXE8VBJVsW1/s1600/arrow-up_basic_blue.png'/></div>