<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="one">
  <h1>Section 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis imperdiet nisi. Duis vulputate erat vel neque fermentum pellentesque. Sed nec mauris vestibulum, egestas urna vel, gravida velit. Sed vulputate est quis sapien dapibus aliquet. Sed sapien nisi, efficitur id ex id, vestibulum tincidunt dolor. Pellentesque eu magna ligula. Pellentesque pellentesque enim a ultricies ultrices. Sed arcu dui, fermentum a massa vel, rhoncus gravida nisi. Fusce finibus erat purus, in porttitor augue scelerisque sed. Vestibulum nec volutpat nunc. Nullam tempor, lacus non accumsan tristique, felis risus dictum elit, vulputate pellentesque orci leo ut sapien.</p>
   <nav class="down"></nav>
</section>
<section class="two">
  <nav class="top"></nav>
  <h1>Section 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis imperdiet nisi. Duis vulputate erat vel neque fermentum pellentesque. Sed nec mauris vestibulum, egestas urna vel, gravida velit. Sed vulputate est quis sapien dapibus aliquet. Sed sapien nisi, efficitur id ex id, vestibulum tincidunt dolor. Pellentesque eu magna ligula. Pellentesque pellentesque enim a ultricies ultrices. Sed arcu dui, fermentum a massa vel, rhoncus gravida nisi. Fusce finibus erat purus, in porttitor augue scelerisque sed. Vestibulum nec volutpat nunc. Nullam tempor, lacus non accumsan tristique, felis risus dictum elit, vulputate pellentesque orci leo ut sapien.</p>
  <nav class="down"></nav>
</section>
<section class="three">
  <nav class="top"></nav>
  <h1>Section 3</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis imperdiet nisi. Duis vulputate erat vel neque fermentum pellentesque. Sed nec mauris vestibulum, egestas urna vel, gravida velit. Sed vulputate est quis sapien dapibus aliquet. Sed sapien nisi, efficitur id ex id, vestibulum tincidunt dolor. Pellentesque eu magna ligula. Pellentesque pellentesque enim a ultricies ultrices. Sed arcu dui, fermentum a massa vel, rhoncus gravida nisi. Fusce finibus erat purus, in porttitor augue scelerisque sed. Vestibulum nec volutpat nunc. Nullam tempor, lacus non accumsan tristique, felis risus dictum elit, vulputate pellentesque orci leo ut sapien.</p>
</section>
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans');
*{margin:0;box-sizing:border-box}
body {
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
  color: #343837;
  line-height: 1.7;
}
section {
  height: 100vh;
  padding: 30px;
  position: relative;
}
.one {
  background: #FFCF8F;
}
.two {
  background: #FFDAF9;
}
.three {
  background: #F7AB9E;
}
nav {
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
}
.top {
  top: 30px;
}
.down {
  bottom: 30px;
}
h1 {
  margin: 60px 0 20px;
}
.one h1 {
  margin-top:0;
}
.top:before {
  content: "\f176";
  font-family: FontAwesome;
  font-size: 30px;
}
.down:before {
  content: "\f175";
  font-family: FontAwesome;
  font-size: 30px;
}
@media (max-width: 480px) {
  body {
    font-size: 14px;
    line-height: 1.5;
  }
  section {
    padding: 20px;
  }
  .top {
  top: 20px;
}
.down {
  bottom: 20px;
}
h1 {
  margin: 50px 0 15px;
  }
}
jQuery(document).ready(function($) {
$('nav').on('click', function() {
  if ( $(this).hasClass('down') ) {
    var movePos = $(window).scrollTop() + $(window).height();
  }
  if ( $(this).hasClass('top') ) {
    var movePos = $(window).scrollTop() - $(window).height();
  }
  $('html, body').animate({
    scrollTop: movePos}, 600);
});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.