Make Smooth Scroll Back To Top in Blogger. For some buddies probably already familiar with the words smooth scroll back to top / back up. Smooth own means soft. So smooth scroll means to roll gently. To create a button Back to Top ordinary, easy actually, just add the code # but back it up directly not soft.
Back to top button is usually used on the blog with a long article, to allow visitors to look back at the top of the article. There are several ways to add the button back to top this.
Here I will share the easiest way, without the Edit HTML. Just add any widget. There are two style that will give me, please use my friend as you like it.
Style1 (without the fade in and fade out)
Intent without the fade in and fade out here is, the button will immediately appear once the blog is opened. To better understand it, please visit first
"His DEMO HERE.
After seeing the demo, compare with the keys back to the top in this blog.
To make it, please add the widget HTML / JavaScript, enter this code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href='javascript:void(0);' onclick='jQuery('html, body').animate({scrollTop:0}, 'slow');' title="Kembali ke atas"><img src="http://3.bp.blogspot.com/-b1hw2cqey60/TfzE0oLSFkI/AAAAAAAAD3w/FpMh-mdf7rA/s400/Back-to-top.png" /></a>
When there is a jQuery plugin, please delete the marked code.
Style2 (with fade in and fade out)
Purpose fade in and fade out here is, the button will not appear immediately unless it has been in the scroll down.
To make it, add this code above the </ head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>
Then add the widget HTML / JavaScript
<style type='text/css' scoped='scoped'>
#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div>
Hopefully I make a smooth scroll back to the top with this. Happy Blogging!