Single Page Website with Smooth Scrolling #javascript

Single Page Website with Smooth Scrolling.md

###Single Page Website with Smooth Scrolling

Demo Link :- http://codepen.io/designdigital/pen/ixDeG

---

put all the page contents inside <section> </section> tag

HTML

<header>
  <nav>
    <ul class="main-navigation">
      <li><a href="#section-one">Link One</a></li>
      <li><a href="#section-two">Link Two</a></li>
      <li><a href="#section-three">Link Three</a></li>
    </ul>
  </nav>
</header>
 
<section class="one" id="section-one">
  <h2>Section One</h2>
  <p>put contents here</p>
</section>
 
<section class="two" id="section-two">
  <h2>Section Two</h2>
  <p>put contents here</p>
</section>
 
<section class="three" id="section-three">
  <h2>Section Three</h2>
  <p>put contents here</p>
</section>

CSS

header {
  position: fixed;
  width: 100%;
  background: #424244;
  z-index: 99;
}
 
.main-navigation {
  list-style-type: none;
  text-align: right;
  padding: 0;
  margin: 0.8em 1em;
}
 
.main-navigation li {
  display: inline-block;
}
 
.main-navigation li a {
  padding: 0.25em 0.5em;
  background: #e16a48;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  border-radius: 3px;
}
 
.main-navigation li a:hover {
  background: #dd5832;
}
 
section {
  min-height: 100%;
  position: relative;
  padding: 3em 1em 1em;
  color: #fff;
}
 
section.one {
  background: #5eaa94;
}
 
section.two {
  background: #e9c057;
}
 
section.three {
  background: #5a986d;
}

JavsScript

$(document).ready(function(){
  $('a[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) {
        var targetOffset = $target.offset().top;
        $('html,body')
        .animate({scrollTop: targetOffset}, 1000); // 1000 is the animation time
       return false;
      }
    }
  });
});