A Pen by ezos86.

index.html

<nav class="navigation">
  <ul>
    <li><a href="#section-1">Section 1</a></li>
      <li><a href="#section-2">Section 2</a></li>
      <li><a href="#section-3">Section 3</a></li>
</nav>
<div id="section-1">
  <h1 style="text-align:center;font-size:70px; font-family:Helvetica;">
  	Section 1
  </h1>
</div>
<div id="section-2">
	<h1 style="text-align:center;font-size:70px; font-family:Helvetica;">
  	Section 2
  </h1>
</div>
<div id="section-3">
	<h1 style="text-align:center;font-size:70px; font-family:Helvetica;">
  	Section 3
  </h1>
</div>

oysDj.markdown

oysDj

A Pen by ezos86 on CodePen.

License.

script.js

$(function() {
		  $('a[href*=#]:not([href=#])').click(function() {
		    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
		      var target = $(this.hash);
		      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
		      if (target.length) {
		        $('html,body').animate({
		          scrollTop: target.offset().top
		        }, 1000);
		        return false;
		      }
		    }
		  });
		});

Smooth-Scrolling.markdown

Smooth Scrolling

A Pen by ezos86 on CodePen.

License.

style.css

#section-1, #section-2, #section-3{
  min-height:600px;
  background-color:#ccc;
  border-top:3px solid #fff;
}
nav.navigation{
  background-color:#333;
  width:100%;
  position:fixed;
  top:0;
}

nav.navigation ul{
	margin:0;
}
nav.navigation ul li{
  display:inline-block;
  list-style:none;
  padding:10px;
  position:relative;
}

nav.navigation ul li a{
	color:#f1f1f1;
  text-decoration:none;
  padding:10px;
}

nav.navigation ul li a:hover{
	background-color:#888;
}