Я использую плагин 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 раз. Мне пришлось бы подняться (предыдущее) 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
}
});
});