Branislav Pavlovic

Example for smooth scrolling button(link) is in the bottom right corner of the page.

Html(link):

<div id="top-button" class="fixed-button">
<span><a href="javascript:void(null);">top &uarr;</a></span>
</div>
<div id="scroll-button" class="fixed-button">
<span><a href="javascript:void(null);">bottom &darr;</a></span>
</div>

Css:

.fixed-button {
background: none repeat scroll 0 0 #111111;
border: 1px dotted #444855;
color: #989eae;
bottom: 0;
right:2px;
font-size: 12px;
height: 15px;
padding: 10px;
position: fixed;
text-align: center;
width: 50px;
z-index: 800;
}

Javascript code:

$(document).ready(function()
{
   
   if($(window).height() < $('body').height())
   $('#scroll-button').show();
   $(window).scroll(function(){ smoothScroller(); });
   
   $('#top-button a').click(function(e){
      $('html, body').animate({scrollTop: '0px'}, 800);
      return false;
   });
   
   $('#scroll-button a').click(function(e){
      $('html, body').animate({scrollTop: $('body').height() + 'px'}, 800);
      return false;
   });
   var smoothScroller = function()
   {
   // get the height of #wrap
   var $wrapHeight = $('body').outerHeight()
   // get 1/4 of wrapHeight
   var $quarterwrapHeight = ($wrapHeight)/4
   // get 3/4 of wrapHeight
   var $threequarterswrapHeight = 3*($wrapHeight)
   // check if we're over a quarter down the page
   if( $(window).scrollTop() > $quarterwrapHeight )
   {
       $("#top-button").show();
       $("#scroll-button").hide();
   }
   else
   {
      $("#top-button").hide();
      $("#scroll-button").show();
   }
  }
 });