O'Reilly

“Top” Watermark Using MooTools

By on  

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.

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')
});

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. :)

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • Using MooTools to Instruct Google Analytics to Track Outbound Links

    Google Analytics provides a wealth of information about who's coming to your website. One of the most important statistics the service provides is the referrer statistic -- you've gotta know who's sending people to your website, right? What about where you send others though?...

  • Making the Firefox Logo from HTML

    When each new t-shirt means staving off laundry for yet another day, swag quickly becomes the most coveted perk at any tech company. Mozilla WebDev had pretty much everything going for it: brilliant people, interesting problems, awesome office. Everything except a t-shirt. That had to change. The basic...

Discussion

  1. 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”?

  2. 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

  3. 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!

  4. 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?

  5. 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

  6. 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.

  7. IE position is not fixed

  8. Updated guys. The “trident4″ update was the golden gem for IE7.

  9. RedTreys

    Very nice.
    Any chance that you (or anyone else who would like to jump in) could offer its equivalent using jquery?

  10. I’ll add that to the to-do list RedTreys. Thank you!

  11. Rodney

    Thanks David, just the info I needed.
    Thanks again.

  12. How do i use this code with wordpress?

  13. Nils

    How to change the code making it work with mootools 1.11?

  14. Emil

    Like Nils, I’d like to know how the code looks like for mootools 1.11

  15. 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

  16. 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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...