Scrolling “Go To Top” Link Using Dojo

By  on  

One of the most popular code snippets of posted on my blog has been the scrolling "Go To Top" link snippet. The premise of the snippet is simple: once the user scrolls an element (usually the BODY element) past a given threshold, a "Go To Top" anchor fades into view. Simple, stylish, and functional -- the definition of a good JavaScript-powered enhancement. I've showed you how to accomplish this task using jQuery and MooTools; here's how you can accomplish that same effect using Dojo.

The HTML

<a href="#top" id="gototop" class="no-click no-print">Top of Page</a>
<!-- you could also create this dynamically using dojo -->

Just a simple "top" link.

The CSS

	#gototop { visibility:hidden; position:fixed; right:5px; bottom:5px; color:#999; font-weight:bold; text-decoration:none; border:1px solid  #ccc; background:#eee; padding:10px; }

It's important to hide the element during the initial page load.

The Dojo JavaScript

dojo.ready(function() {
	var link = dojo.byId("gototop");
	dojo.style(link,{ opacity: 0, visibility:"hidden" });
	dojo.connect(window,"onscroll",function(e) {
		var scrollY = -dojo.position(dojo.body()).y, thresh = 100;
		dojo.anim(topLink, { opacity: (scrollY > thresh ? 1 : 0 ) });
	});
});

When the DOM is ready we grab the link, styling it so that it will hidden via visibility instead of display. On each scroll of the body, we calculate the position of the page and show or hide the link depending on the page position. Easy!

There you have it. Another framework, another flavor of JavaScript, another awesome snippet. Happy scrolling!

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Web Notifications API

    Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the...

  • By
    iPad Detection Using JavaScript or PHP

    The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...

Discussion

  1. smion

    hey, your demo isn’t working for me (firefox 3.6.3) – the button appears but it doesn’t scroll to top ;)

    ps: it would be VERY helpfull, if you can trans-code this to mootools :-)

  2. @smion: Updated the link. Also — there’s a link to the MooTools version above.

  3. Champ

    Walsh… I am having trouble getting it to go back up. How do you get yours to go up?

  4. Very useful tutorial. I will try to apply it on my blog. Good work.

  5. Catar4x

    I love it ! Thank you David !

    If you can do this for all anchor link, it would be sick !

  6. @Catar4x

    Do you mean something like this?

    http://www.cinsoft.net/mylib-examples.html#scrollinganchors

    PS. Dojo sucks!

  7. Catar4x

    Yeah, David made this one time for Mootools. :)

  8. Manoj

    Thank u so much…Very useful tutorial. I will try to apply it on my blog. Good work

  9. SSK

    Thank you David… simple and nice scroll….

  10. robot

    It works in IE and Firefox, but no in Chrome! How to solve of it? Thanks!

  11. Roman

    it not work in safari too.
    it is bad news for us!

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