jQuery easing plugIn，负scrollTop，到达顶部或底部时

Question

我做了一个简单的单页网站，我在使用缓动插件时遇到了问题，当从第一页移动到第二页时，顶部没有足够的空间来“预期”(动画术语)，也没有在底部向上移动到第二页。请查看我的代码演示，谢谢。

请在此处查看演示 http://jsfiddle.net/56vmztjn/ StackExchange 的演示，表现得很有趣......

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>

Answer 1

根据评论中的对话，如果您希望第一页和最后一页使用“缓动”插件显示“拉动”动画，您需要您的网站有额外的空间在页面的顶部和底部。

HTML

<div class="extraspace"></div>
<div class="onePage a 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，添加这个

.extraspace {
    height:50px;
}

这样做会在页面的顶部和底部增加额外的高度，因此拉动动画将起作用，但在页面加载时顶部有一个额外的空间，因此我们需要在页面加载时将使用导航到正确的区域。我们可以用 JQuery 做到这一点:

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

唯一的缺点是用户可以手动滚动到额外的空间部分。希望这会有所帮助。