Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

“Top” Watermark Using MooTools

By David Walsh on February 25, 2009

Whenever you have a long page worth of content, you generally want to add a "top" anchor link at the bottom of the page so that your user doesn't have to scroll forever to get to the top. The only problem with this method is that I may want to get to the top of the page from somewhere in the middle. Using MooTools, we can create a "top" link as a watermark that follows the users down the page.

View Demo

The XHTML

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

Place this anywhere inside the page that you would like.

The CSS

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

This code positions the element in a fixed position so it always stays in the same spot.

The MooTools JavaScript


/* smoothscroll - scroll smoothly to the top*/
new SmoothScroll({duration:500});

/* go to top after 300 pixels down */
var gototop = $('gototop');
gototop.set('opacity','0').setStyle('display','block');
window.addEvent('scroll',function(e) {
	gototop.fade((window.getScroll().y > 300) ? 'in' : 'out')
});

The code is surprisingly short. Of course we use SmoothScroll to make the transition smoothe. You may adjust the pixel trigger amount however you'd like. Unfortunately the above code doesn't work in IE6.

The IE Fix

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

View Demo

I like this method so much that I use it on my website.

Shouldn't this be a plugin?

Don't worry -- ScrollSpy is coming soon enough. :)

Recent Features

By David WalshSeptember 19, 2011
Introducing MooTools Templated
One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...
By David WalshOctober 7, 2019
Interview with a Pornhub Web Developer
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

Incredible Demos

By David WalshDecember 5, 2008
CSS Text Overlap
One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing...
By David WalshAugust 8, 2011
jQuery Chosen Plugin
Without a doubt, my least favorite form element is the SELECT element. The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster. Needless to say, whenever a developer goes...

Discussion

Alelo
hi, realy nice but the ie fix doesnt work right in IE8.0.6001(the newest Ie8 version) its comes but the “absolute” seems to be wrong, shouldnt it be position”fixed”?
MoonKiKi dev team
wonderfull… i m making an agenda in mootools (moogenda ;) ) where i have a diary for week or day that is very long… i think i’ll add this script tonight asap. thank you for the suggestion.

Nunzio Fiore
Santiago
Very interesting effect indeed!
It didn’t work for me in IE 7 though, it stay in the same place, doesn’t get the new height of the window, maybe because you forgot to add the “px” subfix to the bottom and width attributes in the css?

I don’t have time right now to test it in my own, but I’ll probably do it when free ;)

@Alelo:
IE, at least until the 7 version, didn’t support at all position:fixed;, so in IE we’ll need a fix, in other words, need to change it’s position with javascript according to the window position.

Cheers!
anonymous
Nice, since I just started to learn Mootools.
But couldn’t we achieve the same effect with some css and position-fixed or background-attachment?
What do u think?
Guillermo Rauch
Another trick would be checking that Window getScrollHeight() is larger than getHeight() to fade in the element.
I also recommend using Element.Pin from the upcoming mootools-more

http://github.com/anutron/mootools-more/blob/50f23f10f0de3bb8e851486e43028c9d973ce97e/Source/Element/Element.Pin.js
gonchuki
seems that you have been peeking at my blog ;)
http://blog.gonchuki.com/archives/usability-101-adding-a-global-back-to-top-to-your-site/

You should take a look at the study we made back in 2007 about how much scroll is needed before we can confidently show the “back to top” element.

btw, use Browser.Engine.trident4 if you want to isolate ie6, or use a CSS2 selector like we did back then to completely ignore ie6.
冰古
IE position is not fixed
david
Updated guys. The “trident4” update was the golden gem for IE7.
RedTreys
Very nice.
Any chance that you (or anyone else who would like to jump in) could offer its equivalent using jquery?
david
I’ll add that to the to-do list RedTreys. Thank you!
Rodney
Thanks David, just the info I needed.
Thanks again.
Avinash
How do i use this code with wordpress?
Nils
How to change the code making it work with mootools 1.11?
Emil
Like Nils, I’d like to know how the code looks like for mootools 1.11
joe
What’s to do that it work’s with mootools-1.2.3.1-more.js
Updating this
```
var go = document.id('gototop');
```
doesn’t work.
any idea
thx
Ana
Yeah! Very nice post! Thanks a lot for this…

Unfortunately someone stole your WHOLE post:
http://adilkhan116.posterous.com/top-watermark-using-mootools

Keep going,
Ana