A Pen by Peter Boomsma.

index.haml

#container-content
  #content-top
    #logo
      %h1
        clean

    %ul#menu
      %li 
        %a{:href => "#", :id => "cleanpixel"}cleanPixel
      %li 
        %a{:href => "#", :id => "projects"}projects
      %li 
        %a{:href => "#", :id => "contact"}contact

  #content-me
    %p 
      Content me

  #content-projets
    %p
      Content

lrgJo.markdown

lrgJo

A Pen by Peter Boomsma on CodePen.

License.

script.js

$("#cleanpixel").click(function (e) {
  event.preventDefault();
  var  container = $('#container-content'),
        scrollTo = $('#content-me');

  container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
  }, 1500, function () {});
});

$("#projects").click(function (e) {
  event.preventDefault();
  var  container = $('#container-content'),
        scrollTo = $('#content-projects');

  container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
  }, 1500, function () {});
});

style.sass

body,html
  height: 100%

#container-content
  overflow: auto
  height: 100%
  
  #content-top
    margin-bottom: 100%

  #content-me
    height: 100%
    margin-bottom: 100%

  #content-projects
    height: 100%