How to Make a Single Page Website

This tutorial explains how to create a vertical-scrolling single page website in four steps. Check out the demo!

Designing A Single Page Website

There are at least 3 kinds of Single Page websites. The basic idea is that all content is placed on one page, but only a portion of it is centered on your computer screen at a given time. Then you can watch the old content slide away when you click a link, instead of loading a whole new page. Often, the scroll bar is still visible on the side, so you could actually drag it up and down and see the whole page at once.

The picture below is a screen shot I took of another designer’s website, His first page starts at the top, the second starts at the image gallery, the third page starts where the dirt begins, and the last page is centered around the ocean:


I classified the types of single page websites by the direction/s that the page scrolls. Here is my breakdown, with examples:

Vertical Scroll (Most Common)

Barrel + BarcBeaver LabLittle White UmbrellaEshbeata

Horizontal Scroll

Vanity ClaireHotel OxfordLomotek

2D Scroll

Steve & Jacqs

Once again, this post explains the vertical method.

When designing your single page website,  you need to decide the following things:

  1. Will my page start at the top and scroll down (like this), start at the bottom and scroll up (like this), or start in the middle, and move all over (like this)?
  2. How will you differentiate each page?
  3. Will the page be a journey, as with Eshbeata’s site, where you travel from above ground to underwater?
  4. Will each “page” have a separate background color?
  5. Will you put a piece of art that defines the border?
  6. No separation at all?
  7. Will there be overlap between the pages?
  8. If you don’t care about overlap, you don’t have much to worry about, but if you want each “page” to fill everyone’s screen, you need to add extra margin to the bottom of each “page”  to account for different screen sizes.  A netbook might only display 500 pixels, while a 27-inch monitor might display 1200 pixels (depending on the user’s resolution settings).. I tend to give 1200 pixels if I want to be completely sure only one page will display at a time.


The html is actually pretty simple. You’ve seen the FAQ pages that have a list of questions at the top, and then you click one and it takes you to the middle of the page (like this)? That’s the technique we’re going to use.

Basically, you’re going to create a navigation just like normal, except where you normally do an href=”Link Address”, instead of a link address, you will put a pound sign followed by the unique id of each “page”:

This lets the browser know that the link is within the page. (Just think about when you use href=”#” causing the page to refresh – it’s the same idea. The “#” is still telling the browser to load the same page, except when you include text after the # sign, it’s further telling the browser to look for link of that name on the same page, and scroll to that location).

So then if you wanted “three” pages in one, you just create an id for each page in the html. Then, the first thing you do within that div is insert the “id” you specified in the navigation within an anchor tag, like this:

So that’s it for your html – just add the rest of the html content as you normally would, except it will all go in the same file (likely index.html), and each “page’s” content will go within the appropriate id (#page1, #page2, or #page3).


There is a lot I could tell you about the style sheet for a single page website, but the only crucial thing you need to do is give each page id (#page1, #page2 and #page3 from the HTML example) a height of ~1000 pixels (tall enough to take up a user’s computer screen, unless you want overlap – it’s up to you!). This will cause your total page to be several thousand pixels tall, depending on how many internal pages you have.

The other main consideration is the navigation bar. I tend to make a thin navigation bar (say 70px) that is fixed to the top of the screen, so the user can click between “pages” instead of having to use the scrollbar to find their way around (which ruins the fun of a 1-page website for me).

JQuery Smooth Scroll

In order to make your page scroll up and down smoothly using jquery, just paste the following code into your html file, right before the “</body>”. Seriously, that’s it. You don’t need anything in the header, and you don’t need to host a jquery file anywhere on your site. When you click a link in your site that takes you somewhere else within the same page it will slide smoothly.

(Thanks to Karl Swedberg for this code!)

Call To Action

If you appreciated this article, I would be very grateful if you would share it with your friends or leave me a comment. I’m just getting my start as a blogger and would love to hear what I could be doing better.

Published by

Kelly King

Kelly is a Front-End Web Developer in Ann Arbor, MI.

20 thoughts on “How to Make a Single Page Website”

  1. hae thea my name is hillary a web developer though a beginer am creatng a 1 page website how do I link my pages so as to enable smooth scrolling of the pages

  2. This is exactly the type of simple explanation I was looking for in order to build my first single-page portfolio. Thanks so much!

  3. The JS code above didn’t work for me in Chrome/Vivaldi on Linux, but the JS code in the demo source did. Thanks for this very simple, easy tutorial. When it didn’t work, I tracked down a tutorial to do it in CSS, but god that was complicated and overblown just to avoid JS (with the nonbenefit of having issues on some browsers, defeating the point of wanting to use css in the the place lol).

  4. Hey Kelly. I would’ve never known you were a new blogger. Your post was inviting and your style is deceptively simple. Thanks for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *