我正在使用scrollTo 插件创建一个长的垂直页面,您可以在单击或按键时滚动到每个新帖子。
这是布局:
<div id="wrap">
<div class="entry"></div>
<div class="entry"></div>
<div class="entry"></div>
<div class="entry"></div>
</div>
<div id="controls">
<span class="prev">UP</div>
<span class="next">DOWN</div>
</div>
这是jQuery:
function scrollToPosition(element) {
if (element !== undefined) {
$('html, body').scrollTo(element, 500, {
margin: true
});
}
}
$(function() {
var posts = $('.entry');
var position = 0;
var next = $('.next');
var prev = $('.prev').hide();
next.click(function(evt) {
prev.fadeIn();
scrollToPosition(posts[position += 1]);
if (position === posts.length - 1) {
next.fadeOut();
}
});
prev.click(function(evt) {
next.fadeIn();
scrollToPosition(posts[position -= 1]);
if (position === 0) {
prev.fadeOut();
}
});
});
$(document).keydown(function(e){
e.preventDefault();
if (e.keyCode == 40) {
$('.next').click();
}
else if (e.keyCode == 38) {
$('.prev').click();
}
});
除了使用按键时,一切都有效。如果我击中(下一个)5 次,一旦你触底。我必须打 (Prev) 5 次,再加上 1 次才能真正上去。我知道为什么会发生这种情况背后的逻辑,但我不知道阻止它的解决方案。我需要指示按键结束。
谢谢
--
最终代码:
$(function() {
var posts = $('.folio');
var position = 0;
var next = $('.next');
var prev = $('.prev').hide();
next.click(function(evt) {
prev.fadeIn();
scrollToPosition(posts[position += 1]);
if (position === posts.length - 1) {
next.fadeOut();
}
});
prev.click(function(evt) {
next.fadeIn();
scrollToPosition(posts[position -= 1]);
if (position === 0) {
prev.fadeOut();
}
});
$(document).keydown(function(e) {
if (e.which == 40 && next.is(":visible")) {
next.click();
return false
} else if (e.keyCode == 38 && prev.is(":visible")) {
prev.click();
return false
}
});
});