JSFiddle - React, Tailwind, and code Playground

HTML

<div id="down">đź”˝</div>
<div id="container">
   <div class="sect" style="background:salmon;">1</div>
   <div class="sect" style="background:teal;">2</div>
   <div class="sect" style="background:lavender;">3</div>
   <div class="sect" style="background:cream;">4</div>
   <div class="sect" style="background:tan;">5</div>
</div>

CSS

#down {
   z-index: 146494;
   position: fixed;
   width: 50px;
   height: 50px;
   top: 25%;
   right: 25px;
   text-align: center;
   font: 50px/50px sans-serif;
   border: 1px solid #000;
}

#container {
   position: fixed;
   width: 100%;
   height: 45%;
   overflow: auto;
   top: 0;
   left: 0;
   text-align: center;
}

#container .sect {
   position: relative;
   width: 100%;
   height: 100%;
}

JavaScript

$('#down').on('click', function(e) {
	e.preventDefault();
	$('#container').animate({ scrollTop:$('.sect').height()  })
});