How to Make a Single Page Website

原文地址：http://www.insitedesignlab.com/how-to-make-a-single-page-website/

How to Make a Single Page Website

Written By Kelly

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, Eshbeata.com. 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 + Barc, Beaver Lab, Little White Umbrella, Eshbeata

Horizontal Scroll

Vanity Claire, Hotel Oxford, Lomotek

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?

• Will the page be a journey, as with Eshbeata’s site, where you travel from above ground to underwater?
• Will each “page” have a separate background color?
• Will you put a piece of art that defines the border?
• No separation at all?

3. Will there be overlap between the pages?

• 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

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

<div id="nav">
     <ul>
	     <li><a href="#about">About</a></li>
	     <li><a href="#portfolio">Portfolio</a></li>
	     <li><a href="#contact">Contact</a></li>
     </ul>
</div>

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:http://www.insitedesignlab.com/how-to-make-a-single-page-website/

<div id="page1">
     <a id="about"></a>
           About page content goes here.
</div><!--END page1-->

<div id="page2">
     <a id="portfolio"></a>
          Portfolio page content goes here.
</div><!--END page2-->

<div id="page3">
     <a id="contact"></a>
          Contact page content goes here.
</div><!--END page3-->

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

The CSS

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 elsewithin the same page it will slide smoothly.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
                $(".contactLink").click(function(){
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });
            });
            function closeForm(){
                $("#messageSent").show("slow");
                setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }

$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 1000);
           var d = document.createElement("div");
		d.style.height = "101%";
		d.style.overflow = "hidden";
		document.body.appendChild(d);
		window.scrollTo(0,scrollToM);
		setTimeout(function() {
		d.parentNode.removeChild(d);
	        }, 10);
           return false;
         });
      }
    }
  });
});
/*! Smooth Scroll - v1.4.5 - 2012-07-22
* Copyright (c) 2012 Karl Swedberg; Licensed MIT, GPL */
</script>

Voilà! Your site scrolls. If you want to change the speed, go to the line that reads

$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {

and change the 400 to whatever you want. (400 = 400 milliseconds).

(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.

//yzr感觉这个不能作为常规网站呀，如163,sina之类的
做个有特色的小网站，还可以!