<section class="header">
  <div class="content">Header, click to scroll to the footer</div>
</section>
<section class="footer">
  <div class="content">Footer, click to scroll to the header</div>
</section>
*,*:before,*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  height: 100vh;
  border-bottom: 1px solid #ccc;
}

.content {
  margin: 0 auto;
  padding: 100px 0;
  width: 300px;
  text-align: center;
}
$(".header").click(function() {
    $('html, body').animate({
        scrollTop: $(".footer").offset().top
    }, 1000);
});

$(".footer").click(function() {
    $('html, body').animate({
        scrollTop: $(".header").offset().top
    }, 1000);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js