Journal
Page Scroller Template
28 March 2006 › 16 comments
Note: I’ve 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 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.
Discussion + Dissension
Comments closed after 2 weeks.
#1 Justin Perkins
Wow, very cool. Great work on the all-CSS version and the smooth scroller.
I remember somebody releasing a site like this a while ago, I think it was Shaun Inman’s wife? That was the first site I’ve seen that did that, it was awesome. My only gripe is seeing the big scrollbar just makes me want to scroll down (as opposed to using the navigation), seems like it would confuse people.
#2 matthew
Nathan,
Looks great. Another wonderful example from sonspring.
I did notice however that the links in the “jump” example were “flickery” (extremely technical term) in Firefox 1.5.01?
I’m looking forward to seeing what IE people figure out. I had come across xlab recently on cssmania and liked its handling of this fixed approach too (the fixed part that is), are their any helpers there? or is this just an issue when the anchors and the scroll are in full effect?
:)
#3 Jonathan Snook
Just a quick correction: the NAME attribute of an A element is still valid in XHTML 1.0 Strict.
#4 Nathan Smith
Matthew: Actually, the Xlab’s fixed logo doesn’t stay fixed in IE. As far as the flickery JavaScript, I had problems with that too. Hopefully, someone will come up with a better solution than the one I ended up using.
Justin: the More LLC one is Shaun Inman’s fiance’s site, that he did for her.
Jonathan: Thanks for that correction. I edited the post to reflect the change.
#5 Justin Perkins
That’s right! Dang, I’m getting old. Memory. Fading. Fast.
#6 Tony Geer
Hey that’s pretty cool Nathan, it solves the problem of repeating the navigation really well.
“Hey, everything you need to know is right here, so why belabor the point with multiple site sections?”
Yep, this is exactly why I did a one-pager.
#7 Mike
I did something like this on my site with a bit of a css hack to make it work in ie. I have a wordpress template of it at http://www.hackslash.net/files/vertical.zip
#8 Ben Otero
Nathan, quite slick. I especially like the fixed navigation over against some of the other examples (morellc.com).
#9 Nathan Logan
Due to a friend’s server constraints, I put together something similar for his wedding site (it was hosted on his domain when it was being used – this URL is just where I developed it).
It doesn’t work with the combo of JavaScript disabled and CSS enabled, but otherwise it works just fine (this was an acceptable constraint, due to the fact that I knew the very limited target audience wouldn’t have these constraints, and even if they did, could contact the soon-to-be married couple directly). Besides, this drawback could be easily overcome with an unobtrusive solution if one were needed.
Wow, that’s a lot of caveat. My point was that hey, here’s another way to think about a similar problem. =)
#10 Nathan Smith
Nathan L: That’s a very nice one-page site. It works very well, and there’s no disorientation because of page jumps. My only caveat would be the important content falling “below the fold,” forcing the user to scroll. Other than that, very nice mini-site. Next time, you should throw in some Google Maps API flavor.
#11 Ionut Marinescu
Great job on this example. I have one question : could this be achived with 2 fixed columns (left,right) ? if is posible a little example would be great.
#12 Ionut Marinescu
I tried to make the layout i had in mind and i did in about 20 min but it works only in Firefox. Any ideea for other browsers ?
The link is http://www.bpoffice.ro/a/
( and i’m a beginer at xhtml,css layouts so go easy on me )
#13 Nathan Smith
Ionut: This would be possible with two columns, but I’m not going to make another example right now, because I don’t have enough time. You could try asking around on the Godbit forum if you still have questions.
#14 Ionut Marinescu
i made a example using left,right and fixed header the link is here if anyone is interested http://www.ebus.ro/examples/1/
i tested in ie 6.0 ,firefox 1.5.0.2 and opera 8.54 and it works great
thanks Nathan for the original example
#15 Gina S.
Hi! I’m currently working on a website and wanted to use a horizontal layout like this: http://www.centralscrutinizer.it/en/download/horizontinyscrolling.html#index
Its just that I want to have the menu visible as it goes from one section to the next like how you have in your example….just in a horizontal fashion. (the menu would be at the bottom.) I might have bitten off more than I can chew in trying this. Any help is appreciated.
#16 Nathan Smith
Gina: For that type of thing to work, your menu will need to be positioned across the top of the page, and not “stacked.” Meaning, you cannot put the menu in a position where it will be overlapped by your content. For a side-scrolling page, this means not having them side by side.