This script will provide smooth scrolling from bottom to top. Also it is hidden if the page is scrolled to top. It has visibility only if the page is scrolled down.
If you don't like the below image and you don't have any other image you can refer Smooth Scrolling 'Back to Top' Button For Blogger Without Image
Preview
If you don't like the below image and you don't have any other image you can refer Smooth Scrolling 'Back to Top' Button For Blogger Without Image
Preview
Then open Layout in left pane.
Click on 'Add a Gadget'.
Then Click HTML/JavaScript in the popup window.
Paste the below code in the content.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
>
/***********************************************
* Scroll To Top Control script- ©
Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by
http://sathyaselvaraj.blogspot.com
* This notice MUST stay intact for
legal use
* Visit Project Page at
http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
//startline:
Integer. Number of pixels from top of doc scrollbar is scrolled before showing
control
//scrollto:
Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll
document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000,
fadeduration:[500, 100]},
controlHTML: '<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOFaS-tYNg3XNBij86rDA3T_XEUQf3wLVtJIWJwIAKuJX9IsQGVaI0f_XXblr30pstpr-DSjq1v3Tg7N6okieXxYH6rnOGztB9Z3nrxvan6oCQ8ZcfyffnV2gL22hKn8F8QNakJIsXLRs/s1600/Back_to_top.png"
/>', //HTML for control,
which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to
right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also
act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is
positioned using JavaScript
this.$control.css({opacity:0})
//hide
control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto :
parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set
by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop:
dest}, this.setting.scrollduration);
},
keepfixed:function(){
var
$window=jQuery(window)
var
controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var
controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var
scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible
&& !this.state.isvisible){
this.$control.stop().animate({opacity:1},
this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0},
this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws ||
iebrws && document.compatMode=="CSS1Compat" &&
window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)?
(document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div
id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport?
'fixed' : 'absolute',
bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx,
opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to
Top'})
.click(function(){mainobj.scrollup();
return false})
.appendTo('body')
if (document.all &&
!window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for
IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()})
//IE6-
seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' +
mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
And click on 'Save' button.
If you want any other color just replace #009ACD to your desired color hex code in the above snippet.
That's it check your blog J