Best way to scroll a webpage?

This might do what you’re looking for but I’d avoid having everything on one page like that or using javascript to control the main nav like that. What if someone has JS turned off?

Why not have it split onto multiple pages but use css to make the sea “deeper” on different pages?

Also, I’m assuming with the current design, you’re wanting the next ‘page’ to be off the screen when you’re looking at the one above it? On a large monitor, it looks a little funny because the spacing is not large enough. With that design, it’d be hard to get it to look good across all common resolutions. Or am I just mis-reading how you were wanting it to work?

Well, if javascript is turned of it will bump down like normal. It’s actually not a big problem. I could use different pages, but then i wont be able to animate this. This might not be a good idea, but i wanna try to make it and see how it feels and how it works :)

The fact that large monitors will fuck this up a bit is true. I’m looking into ways to fix that. Maybe adding a picture that covers everything but the current “page” or a script that hides all pages but the current one.

Thanks for the link, but i was looking for something more smooth… i know i have seen it somewhere :p

EDIT: i think i found something :)

For the browser height issue, one option is setting the margins dynamically using ‘window.innerHeight’ to get the height of the viewport and base the margin off that. Or ‘window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight’ so it plays nice with IE and different doctypes.

I’ve been a fan of mootools and they have an official plugin for just the sort of thing you’re trying to do.

I dont know anything about programing but always found fascinating the concept of DontClick to move within a page without clicking anywhere.

@lapilofu: I’ve never used mootools, i’ve been using jQuery, but i guess i’ll try mootools for this one. :) So how would i implement this to my site? As i said, i’m completely new to mootools so if anyone could provide me a tutorial that covers this i’d lurve it!

@BronxLens: a bit offtopic, but yeah. i love that site!!!

The code you’ve got on your page looks mostly right, but you need to include two files. The mootools core—which you appear to have—and a mootools more build with SmoothScroll included (because smoothscroll is an add-on—it doesn’t come in the core). Make sure you include them in the right order. Core first, then more, then the javascript to create the smoothscroll. That should work.

I got it to work, i guess you were looking at the source while i was working ;)
Thanks everyone! mootools did the job, and it looks like a really good library. Thanks for introducing me to it, lapilofu