JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

CSS

#wrapper,
.section {
  width:100%;
  float:left;
}

.section { 
  height:80px;
  border:1px solid #ccc; 
}

JavaScript

$(document).on('mousemove', function(e) {
  var y = e.clientY;
  var h = $(window).height();
  var n = h - y;  
  if (y < 60) {
    var t = parseFloat($(window).scrollTop());
    console.log(t);
    $('#wrapper').animate({scrollTop:t + 60 + 'px'},200);
  } else {
    $('#wrapper').stop();
  }
});