Page Scroll To ID

index.html

<div class="pagewrap">
  
  <nav>
    <ul>
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>
      <li><a href="#three">Three</a></li>
    </ul>
    <div class="toggle-icon">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </nav>
  
  <section class="container">
      <div class="content">
        <div id="one"><h1>One</h1></div>
        <div id="two"><h1>Two</h1></div>
        <div id="three"><h1>Three</h1></div>
      </div>
  </section>
</div>

page-scroll-to-id.markdown

Page Scroll To ID

GIST: https://gist.github.com/mariacheline/0c9c69c18dd3e1267a6587ca9d44d989

A Pen by maria cheline on CodePen.

License.

script.js

$(document).ready(function() {
  $('nav').click(function() {
    $('nav').toggleClass('visible');
  });

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

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

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

scripts

<script src="https://use.fontawesome.com/c762b783bc.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

$background-color: #fb5;
$dark-background: #222;
$light-color: #eee;
$dark-color: #333;
$font-stack: 'VT323', monospace, serif, sans-serif;

@mixin transition($property, $duration, $animation){
  -webkit-transition: $property $duration, $animation;
          transition: $property $duration, $animation;
}

@mixin center(){
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

*{box-sizing: border-box; padding: 0; margin: 0; @include transition(all, 0.3s, ease-in-out);}

body{font-size: 16px; font-family: $font-stack}

nav{
  background-color: $dark-background;
  z-index: 1000;
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 100vh;
  
    ul{
     text-align: center;
     margin: 5em auto;
     list-style-type: none;
    }
      
    li{
     border-bottom: 0.0625em solid #111;
    } 
    
    a{
     margin: 0.625em auto;
     display: inline-block;
     padding: 1em;
     text-decoration: none;
     color: $light-color;
     width: 50%;
     letter-spacing: 0.0625em;
     font-size: 1.3rem;
    }
  
  &.visible{
    right: 0;
    
    span:nth-child(1){
      @include transition(all, 0.1s, ease-out);
      transform: rotate(-45deg);
      top: 8px;
    }
    
    span:nth-child(2){
      opacity: 0;
      @include transition(all, 0.01s, ease-out);
    }
    
    span:nth-child(3){
      top: -8px;
      transform: rotate(45deg);
      @include transition(all, 0.1s, ease-out);
    }
 }
  
 .toggle-icon{
  position: absolute;
  top: 0;
  left: -60px;
  width: 25px;
  height: 20px;
  margin: 20px;
  cursor: pointer;
  
  span{
  display: block;
  background-color: $dark-background;
  height: 3px;
  margin-bottom: 5px;
  position: relative;
  }
 }
}

.container{
  width: 100%;
  height: 100vh;
  background-color: $background-color;
  
  .content{
    width: 100%;
    height: 100vh;
    
    div{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: $background-color;
    
    h1{
      position: absolute;
      @include center;
      color: $dark-color - 30;
      font-size: 2rem;
    }
   }
  }
}