Page scroller template

— Topic: javascript

Note: I have done two example pages, one with smooth scrolling JavaScript and the other without. Hopefully this template will provide a good starting point for those wanting a simple, single-page résumé / portfolio website. Read the rest of this article for an explanation of how it works. Check out the action here…

Demo: standard | smooth scroll | download

I have always been a big fan of people gutsy enough to just have a single page dot-com. It's as if to say, "Hey, everything you need to know is right here, so why belabor the point with multiple site sections?" For examples of what I'm talking about, check out these sites: More LLC and TonyGeer.com. That being said, the problem (as I see it) is the necessity of having multiple instances of the same navigation. It seems to me that it would be best if you could have one fixed navigation box, and let the rest of the content flow.

So, enter the beloved (and deprecated) iframe to save the day! I'm only kidding, sheesh - don't flame the comments just yet. I really wanted to do something like Jonathan Snook has for his comment form, only not have to resort to JavaScript to position the div. In case you're wondering, IE6(That cursed browser) cannot handle position: fixed in CSS, thus the need for a crafty work-around.

Snook pointed me in the right direction with this Tagsoup tutorial, which explains how to simulate fixed positioning by using IE's incorrect interpretation of position: absolute. So, with that out of the way, I went looking for a good smooth scrolling JavaScript. There are a couple of good options out there, including ones from Squidfingers and the guys behind Moo.fx, but in the end I finally decided upon a lightweight script I found over at Sitepoint.

My other problem with smooth scrolling is that it tends to rely on using anchors like this: <a name="foo"></a>. This is bad for two reasons: First, it's essentially a link wrapped around nothing, going nowhere, and the name attribute only works on <a> in XHTML 1.0 Strict. Luckily, this is an easy fix to make. I changed name to id and a to h2, allowing me to put an ID in a header instead of free-floating by itself. The benefit of this is, if you were to give the header padding, the page-jump aligns with that, instead of the actual text.

So, with that quick change, I had a workable smooth scroller and a fixed menu that followed the browser-view. That is, until I closed Firefox and tried this bad boy in Internet Explorer. Needless to say, things went awry. You see, in order to get IE to cooperate, we have to take the overflow off of the HTML and put it on the body instead, like so:

* html {
	overflow: hidden;
}

* html body {
	height: 100%;
	overflow: auto;
}

Due to this slight change, the scrolling JavaScript no longer affects the entire page, because IE uses document.documentElement as the page container instead of document.body. This is not entirely bad though, as it degrades gracefully in IE, simply using the anchor jumps as you'd normally expect. If there are any JavaScript geniuses out there who can fix it in IE, please do.

Me, elsewhere