JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<body>
	<div id="container" >
		<section id="top">
			<button type="button" onclick="logic()">click to scroll</button>
		</section>
		<section id="middle">
			<div id="middle-container">
				<div id="hleft" class="middle-box">
					<div class="title">
						<h1>Our story</h1>
					</div>
				</div><!--
		 	 --><div id="hcenter" class="middle-box">
		 	 		<div class="title">
						<h1>Products</h1>
					</div>
				</div><!--
			 --><div id="hright" class="middle-box">
			 		<div class="title">
						<h1>Recipes</h1>
					</div>
				</div>	
			</div>
		</section>
		<section id="bottom"></section>
	</div>
	<footer>
		<section id="footer-t"></section>
	</footer>

<script src="jquery.min.js"></script>

	<!--<script src="frame/jquery-ui.js"></script>-->

	<script src="jquery-ui.min.js"></script>
</body>

CSS

*{
	margin:0;
	padding:0;
}
html{
	height:100%;
}
body{
	background: #205093;
	height: 100%;
	width: 100%;
	overflow:hidden;

}

#container{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background: #3F086F;
	/*overflow: hidden;*/
	/*position: fixed;*/
	position:fixed;


}
section,footer{
	height: 33.33%;
}
#top{
	background: yellow;
}
#middle{
	background: orange;
	
}
#bottom{
	background: red;
}
#middle-container{


	width: 80%;
	height: 100%;
	background: purple;
	font-size: 34px;
	color: white;
	margin: 0 auto;
}
.middle-box{

	display: inline-block;
	width: 33.33%;
	height: 100%;
	text-align: center;
}

#hleft{
	background: blue;
}
#hcenter{
	background: cornflowerblue;
}
#hright{
	background: lightblue;
}
.title{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

footer{
    top: 100%;
	color:red;

	position: relative;
	height: 50%;
	background: black;
}
#footer-t{
	background: white;
	height: 50%;
}

JavaScript

var scrollUpDown = "-=50%";

$( window ).scroll(function() {
  scroll();
});
function logic(){
	scroll(scrollUpDown);
	
}



function scroll(){
	$("footer").animate({top: scrollUpDown}, {duration: 950, easing: 'easeInOutQuart'});
	if(scrollUpDown.substring(0,1)== "-"){
		scrollUpDown = "+"+scrollUpDown.substring(1,scrollUpDown.length);
	}else{
		scrollUpDown = "-"+scrollUpDown.substring(1,scrollUpDown.length);
	}
}