Smooth Scroll To Top Button

You can enable your visitors to directly go to the top part of your site when your site has to much content. Usually visitors feel pretty bored when they roll the button on the mouse to go to the top. Some people even close the site for bearing the burden to scroll all the way to the top.

But thanks to this tool which I am going to tell how to add in your blog, your visitors can be forwarded to the top menu without having to scroll.

As a live example you can see the scroll to top menu of our blog. It is the same widget I am talking in this post.

So today we shall be adding this awesome widget. Adding this widget is very easy. You just have to follow some steps;

1. Code Of Scroll To Top Button;

Given below is the Html code of this widget. You can directly copy it;

<script type="text/javascript" >
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/AVvXsEjolM9fXPNbdB5OuN67cSkL4590ggf0mdeZJ_-1Re46gkno2bBIKVDryTyvm_QJKAhNtzJCYkDkq75Z1Ui1ZrHkWRP-WNYOa0onPCuBM6Focs3Hg9yq_xK3I3fF5ITWiDrFwZJMQbRCdoU/" />', //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>

2. Adding The Widget To Blog;

After you copied the code it's time to add it in the blog. To add it follow below steps;

• Go to dashboard>Layout.
• Click on Add A Gadget in the footer area.
• Choose Html/Javascript and paste the code you got in step 1.
• Leave the title empty and click on save.

Now, you are done. Open your blog and you can see your smooth scroll to top button. Happy Blogging Pals!

Author : Anonymous

Share this

Related Posts