• Choose a category
• All
• Classic-Fiction

chapter_03/14_floating_nav_2/script.js (excerpt)

$(window).scroll(function() {

$('#navigation')

.stop()

.animate({top: $(document).scrollTop()},'slow','easeOutBack');

});

For such a significant effect, it requires a satisfyingly minimal amount of code!

Scrolling the Document

When a long list of information about related (yet varied) subjects needs to be displayed on a single HTML page, it’s common to include a hyperlinked list of the subjects at the top of the page.

These internal links will immediately jump to the correct position for the menu item you selected. After the content, there’s often a link to take you back to the top of the screen—so you can select another menu item. Let’s try adding this functionality to our page.

The first task is add the link to our page’s footer. To jump to the top of the page, all we need to do is set our link’s href attribute to #.

If we think about it, all we want to do is animate the page’s scrolling position, which is represented by scrollTop in jQuery. We’ll also need to cancel the default link action—otherwise the page will jump before our animation has time to occur. If you’re new to JavaScript, there’s an easy way to accomplish this: any function handling a link’s click event need simply include the statement return false to cancel the link’s default behavior:

$('a[href=#]').click(function() {

$('html').animate({scrollTop: 0},'slow');

return false; // Return false to cancel the default link action

}

This code introduces a new kind of selector: the attribute selector. By enclosing an attribute and the value we want to look for in square brackets ([]), we can narrow a selection to include only elements with a specific attribute value. In this case, we’re looking for only those links with an href value of #.

This code works, and is certainly clear and simple, but it does encounter a slight issue. If the user’s browser is operating in quirks mode, the $('html') selector will fail. (Unsure what quirks mode means? Take the time to read the SitePoint CSS reference page on the topic for a detailed explanation.) While you should be marking up your pages in a way that triggers standards mode, sometimes you’ll be working with legacy code and thus be without that luxury. To make the above code work in quirks mode, you’d need to use the selector $('body'). We could also target both, just to be sure: $('html, body'). This in turn causes issues in certain versions of the Opera browser, which (probably correctly) tries to scroll both elements at the same time.

“But you said jQuery sorts out all our cross-browser issues!” you might exclaim. To be fair, it sorts out most cross-browser issues. This is a slightly trickier one, and is not addressed in the core jQuery library. Fortunately for us, it’s fairly simple to work around. Even more fortunately for us, someone has taken the time to package that workaround (as well as a plethora of other scrolling functionality) into a plugin called ScrollTo.

The ScrollTo plugin, available from the plugin repository, is a stable plugin for scrolling the screen and overflowed elements. It’s more than capable of handling any of the scrolling tasks we’ve seen so far.

After you’ve downloaded and included the plugin, you can rewrite the top link functionality and forget all your worries about obscure browser bugs:

chapter_03/15_page_scroll/script.js (excerpt)

$('a[href=#]').click(function() {

$.scrollTo(0,'slow');

return false;

});

This syntax probably looks a little strange to you, in that we’re calling scrollTo directly from the jQuery alias. The plugin is clever, and knows that if we call it directly in this way, we want to scroll the entire window. If we wanted to scroll a specific overflowed element, we’d use the traditional selector syntax, for example: $('div#scrolly').scrollTo(0, 'slow').

The ScrollTo plugin is feature-packed and not limited to scrolling by an integer value. You can pass in a relative value (like +=50px), a