Fading Back To Top Scroller Using MooTools

By Vinod Suthersan → Wednesday, May 2, 2012
MooTools Back To Top Scroller
Make the "Back to Top" button appear only when reach the bottom of the page. Scroll down the page to see the "To Top" widget. The gadget looks like a watermark to the button of the web page.

Many websites these days have the "Back to top" button at the button of their site. The "Go to top" button helps the users reach the top of the page by minimizing the scroll action using the mouse. Again such type of button is useful if your page has lengthy contents. This is my first MooTools experiment.

Objective of the tutorial:

1. Create a "Back to top" button.
2. Make the button fade when you scroll down the page.
3. Make the button appear only when you start scrolling down the page.
4. Use MooTools to achieve the effect.
5. Keep the button stuck or fixed to the bottom of the page.

You might also like:
CSS Sticky Footer

Technologies used:

1. MooTools Plugin
2. JavaScript
3. CSS
4. HTML

Code for the tutorial with explanation:


MooTools Plus JavaScripts
<script src="http://itechcolumn.googlecode.com/files/moo1.2.js" type="text/javascript"></script>

<script type="text/javascript">
  window.addEvent('domready',function() {
   new SmoothScroll({duration:500});
   /* go to top */
   var go = $('gototop');
   go.set('opacity','0').setStyle('display','block');
   window.addEvent('scroll',function(e) {
    if(Browser.Engine.trident4) {
     go.setStyles({
      'position': 'absolute',
      'bottom': window.getPosition().y + 10,
      'width': 100
     });
    }
    go.fade((window.getScroll().y > 300) ? 'in' : 'out')
   });
  });

</script>


CSS
<style type="text/css">
#gototop { display:none;
position:fixed;
right:5px;
bottom:5px;
color:#fff;
font-weight:bold;
text-decoration:none;
border:1px solid #baba52;
background:#eb2889;
padding:10px; }
#gototop { text-decoration:none; cursor:pointer;}
</style>


HTML Markup
<a class="no-click no-print" href="#top" id="gototop">Back To Top</a>

Explanation:
The HTML is easy to understand which can be placed anywhere on to your webpage section.

The CSS is simple to understand as well. Which makes the button float and stuck to the bottom of the page.

The MooTools JavaScript does all the magic.
<script src="http://itechcolumn.googlecode.com/files/moo1.2.js" type="text/javascript"></script>

We have an IE fix as well:
 /* go to top */
   var go = $('gototop');
   go.set('opacity','0').setStyle('display','block');
   window.addEvent('scroll',function(e) {
    if(Browser.Engine.trident4) {
     go.setStyles({
      'position': 'absolute',
      'bottom': window.getPosition().y + 10,
      'width': 100
     });
    }
    go.fade((window.getScroll().y > 300) ? 'in' : 'out')
   });





Hope you liked this tutorial. Enjoy rest of the tutorial on this website. Have a great time. Any questions and suggestions are welcome. Thanks for peeping in.

~iTechColumn
Karan Vyas

Karan Vyas is the founder at Itechcolumn.com, a 19 year old student pursuing his B.Tech in ECE.He is passionate blogger,Web Developer having vast knowledge on reverse engineering,hacking,software developement.Apart from this he is involved in witchcraft black magic and hypnotism.

No Comment to " Fading Back To Top Scroller Using MooTools "

Your comment here