Watermark mootools help

I'm a mootools beginner. I know a lot of html and css but javascript is not for me (at least now that I'm starting to learn it)...

I saw this post: http://davidwalsh.name/mootools-watermark This post features this "watermark - Go To Top" button.

html:

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>

css:

#gototop { display:none; position:fixed; right:5px; bottom:5px; }

javascript:

<script type="text/javascript">
    window.addEvent('domready',function() {
        new SmoothScroll({duration:500});

        var go = $('gototop');

        go.set('opacity','0').setStyle('display','block');
        window.addEvent('scroll',function(e) {
            go.fade((window.getScroll().y > 300) ? 'in' : 'out')
        });

    });
</script>

What I pretend is that the link don't be as display:none; in the css because if the user doesn't have javascript turned on then the user will not see the button.

So, what I want is to hidde it and show it only after the scroll being bigger than 300px. If the user doesn't have javascript turned On in his browser, then he can see the button showed all the time...

So, for this html and css, which javascirpt should I use as开发者_运维知识库 a toggle on/off in the display of oppacity:

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>

#gototop { display:block; position:fixed; right:5px; bottom:5px; }

Can anybody help me???

Thanks, Matt

window.addEvent('domready', function() {
   $('gototop').setStyle('display','none');
   ((window.getScrollSize().y + 300 )> window.getSize().y) ? $('gototop').fade(1) : $('gototop').fade(0)  
});