Question

I’m building a one-page site with the content area as large content boxes stacked down the page.

http://salondoreen.com/lowercasemenu.html

I’m looking for ideas on a way to use javascript to jump to each content box. With a one-page site like this, it takes a lot of scrolling to get to the bottom.

My idea is to somehow make this easier. If you are in one box, and you scroll down just a single click, I want the next box to scroll all the way up the page in one jump. That way the content stays easy and readable, and a box will never be half-on half-off the page. Theoretically you could scroll to the bottom of the page in less than ten clicks.

Does that make sense? I’m thinking of something similar to the home screen on android phones. It jumps horizontally between screens, no matter how little you swipe. There will only be one box on the page at time.

Disclaimer: I am a noob web developer, any and all help is appreciated. Thanks!

Answer 1

I would point you toward binding on the scroll event with jquery .scroll(), and using either IDs via http://myurl.com/derp#scrollhere style of links or use the jquery.ScrollTo plugin