<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<nav class="menu">
  <ul>
  <li><a href="#info"><span>1</span></a></li>
  <li><a href="#quiz"><span>2</span></a></li>
  <li><a href="#super"><span>3</span></a></li>
  <li><a href="#rules"><span class="rules-span">4</span></a></li>
  </ul>
</nav>
<div id=info>1</div>
<div id=quiz>2</div>
<div id=super>3</div>
<div id=rules>4</div>
html,body{
  margin:0;
  background: silver;
}
div {
  font-size: 50vh;
  text-align: center;
  line-height: 100vh;
  color: rgba(0, 0, 0, 0.3);
  height: 100vh;
  margin: 16px;
  background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
$(document).ready(function(){
  
  $("nav").on("click","a", function (event) {
        event.preventDefault();
        var id  = $(this).attr('href'),
        top = $(id).offset().top;
        $('body,html').animate({scrollTop: top}, 1000, 'easeOutBounce');
   });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.