One-Page Website JQuery

Hi Everyone,

I am really starting to dig the “one-page website” approach. I know I can accomplish this by loading various content into one div. But is there JQuery approach whereby we can create one long document and navigate to different sections using targets/named anchors?

Thanks so much!

Take a look at this page http://imakewebthings.com/jquery-waypoints/ - waypoints is a plugin for figuring out where on the page you are.
And this plugin, jQuery LocalScroll, helps you sort out the local scrolling in a page.

I’ll also point out that single page websites are a little bit the flavour of the month and it’s worth spending some time to figure out if that’s exactly what you want. Sometimes you end up with sites that are simply too long, take really long to load, convey way to much for a single page and can actually be harder for people to navigate if they aren’t thought out well.

Having said that, with the right site content and creative it’s something that can potentially work very well, just make sure it isn’t done because “the client saw it somewhere and now they want it” :slight_smile:

Take a look at this page http://imakewebthings.com/jquery-waypoints/ - waypoints is a plugin for figuring out where on the page you are.
And this plugin, jQuery LocalScroll, helps you sort out the local scrolling in a page.

I’ll play around with them and I’m sure I’ll have a couple of questions. I’ll let you know. Are there circumstances under which I may need both of these?

I’ll also point out that single page websites are a little bit the flavour of the month and it’s worth spending some time to figure out if that’s exactly what you want. Sometimes you end up with sites that are simply too long, take really long to load, convey way to much for a single page and can actually be harder for people to navigate if they aren’t thought out well.

Great observation. With that thought, it seems that while too much information may kill a one-page site, other unwanted issues may arise by having too little information to justify multiple server requests with traditional navigation.

Having said that, with the right site content and creative it’s something that can potentially work very well, just make sure it isn’t done because “the client saw it somewhere and now they want it” :slight_smile:

Okay. I think I have a very specific purpose in mind for this approach: a “sales”, “event registration”, or other “promotion(al)” type website, specifically. More clearly, something that is designed to convert visitors.

The other choice, of course (as mentioned in the original post), would be to dynamically load the information into a big div as it is requested.

Any other thoughts?

Thanks so much!

There’s an approach that doesn’t even need jQuery.


<a href="#section1">Section 1</a>

...

<div id="section1">
...
</div>

yeah, I saw that same approach at this site http://www.insitedesignlab.com/how-to-make-a-single-page-website/ and jQuery “smooth scroll” was used. I just wanted to know if there was a different/better approach. But there’s really not much (at this point) that I could want to do that your suggestion wouldn’t accomplish, Paul.

Thanks.