How to add Smooth 'Scroll To Top' button in Blogger
Smooth Back to top button setup has three steps. Read on-
Step 1: Add the jquery
- First, Log in to Blogger, select your Blog,
- Go to 'Template' tab, Select ' Edit Html'
- Search (using Ctrl+F or Cmd+F) into code snippet <head>
- Paste this Phrase under <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- Save template, Then
Step 2: Install it
- Go to 'Layout' tab, select 'add a gadget',
- Select 'html/javascript' than copy and paste the following codes in content box-
<style>
.ks-back-to-top {
position: fixed;
bottom: 2em;
right: 15px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="ks-back-to-top" src="Image Url" />
<script type="text/javascript">
/*****www.crawlist.net***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.ks-back-to-top').fadeIn(duration);
} else { //www.crawlist.blogspot.com
jQuery('.ks-back-to-top').fadeOut(duration);
}
});
jQuery('.ks-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Step 3: Install the Button
Now ten different of 'Back to top' button images code given below, copy your desired Image url and paste link in Image url. 'Save html/javascript' gadget
Style 1 : http://goo.gl/hXP25U
Style 2 : http://goo.gl/uS17vC
Style 3 : http://goo.gl/hQmgkt
Style 4 : http://goo.gl/OgQoxH
Style 5 : http://goo.gl/uOKbj1
Style 6 : http://goo.gl/U97n9Z
Style 7 : http://goo.gl/jd4KqM
Style 8 : http://goo.gl/Silz50
Style 9 : http://goo.gl/GBni0S
Style 10 : http://goo.gl/zVAD3q
And see your Smooth Scroll to top button in Live action.
Template compatibility and Faq-
Will work on almost every stranded structured template. Not compatible with Dynamic Templates .Also if you template already has the jquery code, don't copy paste the jquery code into template, skip step 1 just begin from Step 2 - see what happens.
Things you can do-
- If you want to change default button appearing area (default is 15px from web browser), just change 15px to whatever px you desire.
- If you want to use custom Back top top image/icon, upload you image to any third party Image host (like Tinypic etc) and copy Image location url, paste link in Image Url.
