Actually had a lot of tutorials to make it back to top button, but there are questions about the visitors of this blog how to make a button back to top to bounce effect.
Before stepping on the tutorial, I would like to thank the visitors of this blog, because of the variety of questions led to the idea to create a new artike.
Go to the tutorial ... What exactly is the bounce effect? meaning bounce bounce, so back to top after discroll there will be little effect of reflection. To apply, please follow these easy steps:
Step 1: Prepare the jQuery code above the </ head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
skip this step if you already exists on your blog. Can be different versions like 1.3.2, 1.6.4, 1.7.1, and others.
Step 2: Save the code is still above the </ 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='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div>
Display button with the code above using the fade in / fade out (appears slowly), if want to appear on the button below 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>
If my friend wants a button scroll back to the top without the bounce effect, tutorial visit HERE.
Hope it is useful ....