the snipts scroll-buttons

One thing I found on the walsh was a snippet for the scroll-buttons on the left here.
I've placed the two scroll-buttons inside a wrap, which I'd like to fade a bit later on.

<div id="the_bttns_wrap">
 <a id="the_totopBttn" class="bttn" title="↑ to top of the page">h</a>
 <a id="the_nextBttn" class="bttn" title="↓ scroll down">i</a>
</div>

note: I'm using my buttons with letters that get replaced by a cufon-font, so the buttons-text is just one char here. See this article for more information.

Some lines of css. The position of the wrap is fixed.

#the_bttns_wrap {
left: 10px;
top: 200px;
position: fixed;
z-index: 10000;
}

.bttn {
width: 26px;
height: 30px;
display: block;
font-size: 185%;
cursor: pointer;
}

and a little bit of moo-magic

// the scroll-buttons function
var scrollButtons = function () {
 var the_totopBttn = $('the_totopBttn');
 var the_nextBttn = $('the_nextBttn');

 // at the beginning totop is not needed. We are at top   ;-)
 the_totopBttn.set('opacity','0').setStyle('display','block');

 var scroll = new Fx.Scroll(document.body, {
  duration: 500,
  wait: false
 });

 // check the current scroll and fade the buttons in or out if necessary
 window.addEvent('scroll',function(e) {
  the_totopBttn.fade((window.getScroll().y > 300) ? 'in' : 'out');
  the_nextBttn.fade((window.getScroll().y + window.getSize().y < window.getScrollSize().y) ? 'in' : 'out');
 });

 // fading of the wrap
 $('the_bttns_wrap').addEvents({
  'mouseenter': function(){this.fade(1)},
  'mouseleave': function (){this.fade(.3)}
 }).fade(.3);

 the_totopBttn.addEvent('click', function(){
  scroll.start(0, 0);
 });

 the_nextBttn.addEvent('click', function(){
  scroll.start(0, window.getScroll().y + 450); 
  // 450 is the value to scroll down
 });
}

// and on domready call the function
window.addEvent('domready',function() {
 scrollButtons();
});

s

done.

requires: core