body {
   background: #444444;
   color: white;
    font: 15px/1.51 system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
   margin:0 auto;
   max-width:600px;
   padding:20px;
   min-height:1000vh; /* 100 times viewport height */
}
#counter {
  position:fixed;
  top:100px;
  left:40%;
  font-size:50px;
}
.reset {
  color:white;
  text-decoration:none;
  border:1px solid white;
  padding:10px 20px;
  background:rgba(0,0,0,0.1);
}

var i = 0;
var $counter = $('#counter');
$(document).ready(function(){
  $(document).on('scroll', function(){
    $counter.html(i);
    i++; 
  });
});

$('.reset').on('click', function(){
  $counter.html('');
  i = 0;
})