html - jQuery easing plugIn, negative scrollTop, when reach top or bottom -

i made simple 1 page website, , have trouble easing plugin in, when moving page 1 page two, there not enough space @ top "anticipate" (animation term), nor @ bottom moving page two. please see demo code, thanks.

please see demo here http://jsfiddle.net/56vmztjn/ stackexchange's demo, acting funny...

jquery.extend( jquery.easing,  {  	def: 'easeinback',  	swing: function (x, t, b, c, d) {  		//alert(jquery.easing.default);  		return jquery.easing[jquery.easing.def](x, t, b, c, d);  	}, easeinback: function (x, t, b, c, d, s) {  		if (s == undefined) s = 1.70158;  		return c*(t/=d)*t*((s+1)*t - s) + b;  	}  });  // utility  function onepage(el) {  	var windowwidth = $(window).width(),  		windowheight = $(window).height(),  		next = el.next('.onepage'),  		prev = el.prev('.onepage');  	el.width(windowwidth);  	el.css({"min-height":windowheight});  	  	el.find('.next').on('click', function() {  		goto(el, next);  	});  	el.find('.prev').on('click', function() {  		goto(el, prev);  	});  }  function goto(start, end) {  	var ini = start.offset().top,  		destination = end.offset().top,   		distance = math.abs(ini - destination),  		speed = distance/1.5;   	$('html body').animate({  		scrolltop : destination  	}, speed);  }  // on ready  $(document).ready(  	function() {  		$('.onepage').each(  			function(index, el) {  				onepage($(el));  			}  		);  	}  );

body, html {    padding:0; margin:0;  }  .onepage {    padding: 2em;  }  .a {      background:red;  }  .b {      background:yellow;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>  <div class="onepage a">    <button class="next">next</button>    <button class="prev">prev</button>    <h1>page 1</h1>  </div>  <div class="onepage b">    <button class="next">next</button>    <button class="prev">prev</button>    <h1>page 2</h1>  </div>    <div class="onepage a">    <button class="next">next</button>    <button class="prev">prev</button>    <h1>page 3</h1>  </div>

based on conversation in comments if want first , last page have 'pull' animation work using 'easing-in' plug-in show animation need website have space @ top , bottom of page.

html

<div class="extraspace"></div> <div class="onepage top">   <button class="next">next</button>   <button class="prev">prev</button>   <h1>page 1</h1> </div> <div class="onepage b">   <button class="next">next</button>   <button class="prev">prev</button>   <h1>page 2</h1> </div>   <div class="onepage a">   <button class="next">next</button>   <button class="prev">prev</button>   <h1>page 3</h1> </div> <div class="extraspace"></div> 

css, add this

.extraspace {     height:50px; } 

doing adds height top , bottom of page pull animation work on page load there space @ top need navigate use correct area on page load. can jquery:

$( document ).ready(function() {     $('html, body').animate({scrolltop: "50px"}, 1); }); 

the downside user can manually scroll space sections. hope helps.