A Pen by Erick Jones.

index.html

<header id="top">
  <h1>Eu sou um header</h1>
</header>

<nav role='navigation'>
  <ul>
    <li><a href="#top">Home</a></li>
    <li><a href="#sobre">About</a></li>
    <li><a href="#clientes">Clients</a></li>
    <li><a href="#contato">Contact Us</a></li>
  </ul>
</nav>  

<section id="sobre">
  <h2>Area 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati earum voluptatibus, natus, tempore ducimus molestiae. Maxime debitis molestias, nam dolorem architecto, alias repellendus accusantium culpa dolores impedit dolor, quaerat quae.</p>
</section>

<section id="clientes">
  <h2>Area 2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati earum voluptatibus, natus, tempore ducimus molestiae. Maxime debitis molestias, nam dolorem architecto, alias repellendus accusantium culpa dolores impedit dolor, quaerat quae.</p>
</section>

<section id="contato">
  <h2>Area 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati earum voluptatibus, natus, tempore ducimus molestiae. Maxime debitis molestias, nam dolorem architecto, alias repellendus accusantium culpa dolores impedit dolor, quaerat quae.</p>
</section>

script.js

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 400, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});

style.css

* { box-sizing: border-box; }

html, body   { width:100%; height:100% }
body {
  padding: 0px;
  margin:0;
  font-family: 'arial'
}

h1 { font-size:40px; color:#FFF; font-weight: 100}

header {
  width:100%;
  height:400px;
  background-color: #eaeaea;
  background-image: url(http://wallsaved.com/wp-content/uploads/2014/01/tropical-desktop-wallpaper.jpg);
  padding: 20px;
  text-align: center;
  padding-top: 200px;
  background-size: cover;
  background-position: 0 650px;
}

nav {
  background-color: #333;
  position: relative;
}

nav ul {
  padding: 0;
  list-style-type: none;
  display: inline-block;
  margin: 0 auto;
  background-collor: red;
  width: 100%;
  text-align: center;
}

nav ul li {
  display: inline-block;
  padding: 10px 15px;
  margin-top: 7px;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #999;
}

nav ul li a:hover {
  background-color: #666;
  color: #FFF;
}

section
{ 
  height:500px;
  width:100%;
  padding: 20px;
  border-top:10px solid #333;
  text-align:center;
}