General Question

wilhel1812's avatar

Best way to scroll a webpage?

Asked by wilhel1812 (2872points) October 1st, 2008

So i’m making this site (yeah, i know the design looks stupid) and i want the entire site to be in just one html document with the entire laout repeating for every subpage. I’ll use anchors for navigating. The concept of this design is that it is an underwater kinda thing where you go deeper and deeper and eventually ending at the bottom of the sea. I’m gonna add a lot of stuff to the background, fish, bubble and small easter eggs maybe. You’ll have to test this to understand what i want.

Anyways, i’m wondering what will be the best way to animate the scrolling? so that i smoothly scroll deeper down to the bottom instead of just bumping. Some jQuery, mootols or something would do it i guess. Any tips?

Observing members: 0 Composing members: 0

8 Answers

damien's avatar

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?

wilhel1812's avatar

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 :)

damien's avatar

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.

lapilofu's avatar

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

BronxLens's avatar

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

wilhel1812's avatar

@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!!!

lapilofu's avatar

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.

wilhel1812's avatar

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

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther