How to Make a stylish button Bounce Back to Top

Actually I have a lot of tutorials to make it back to top button, but there is no question of this blog visitors about how to make the switch back to the top with a bounce effect.

Before stepping on the tutorial, I wish to thank the visitors of this blog, as with many questions raised the idea to create a new article.

Further to the tutorial ... What is the effect of bounce it? bounce means bouncing, so back to top after discroll there will be little effect of reflection. To apply, please follow the easy steps:

Step 1: Save the jQuery code above </ head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

skip this step if you are already on your blog. Versions can vary such as 1.3.2, 1.6.4, 1.7.1, etc.

Step 2: Save the code is still above </ 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>

Step 3: Create a new widget HTML / JavaScript, save this code:

<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/AVvXsEi2pJfql0ADB63Zv0pRAMw8jLRjrktAAykePK1W5xQSvk0ohDTrs2vEaEEjymHhLRPLzARwfnsiXt3LDNj_xeQcOGxGyOlYOv0lezvIxH1NT7ncFNsXwxo_5gAA5a9OgcMKuLBCxCvHATT_/s1600/arrow-up_basic_blue.png'/></div>

Display button with the code above using the fade in / fade out (emerged slowly), when the button want to emerge from the bottom like this blog, replace the code in step 2 with this code:

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#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>

Done !
Thanks for coming