Вы можете использовать прослушиватель событий keydown
для прослушивания нажатий клавиш. Вы можете использовать это в <input>
полях и т.п. Поскольку события нажатия клавиш всплывают вверх по DOM, вы можете использовать их на объекте document
, чтобы поймать любое нажатие клавиши на страница:
$(function () {
$(document).keydown(function (evt) {
alert("Key pressed: " + evt.keyCode);
});
});
Каждое нажатие клавиши имеет код. Если вы используете приведенный выше код на своей веб-странице, вы увидите, что код клавиши для стрелки вниз - 40. Вы можете выделить это с помощью оператора if
или switch
в обработчике:
jQuery(function () {
$(document).keydown(function (evt) {
if (evt.keyCode == 40) { // down arrow
alert("You pressed down.");
}
});
});
Теперь вам нужно привязать код, который фактически переходит к следующему заголовку. Я рекомендую абстрагировать код в функции, чтобы вы могли использовать его как для нажатия клавиш, так и для щелчков. Вот функция вместе с вариантом исходного кода, который ее использует:
// Here is the function:
function scrollToNew () {
scrollTop = $(window).scrollTop();
$('.new').each(function(i, h2){ // loop through article headings
h2top = $(h2).offset().top; // get article heading top
if (scrollTop < h2top) { // compare if document is below heading
$.scrollTo(h2, 800); // scroll to in .8 of a second
return false; // exit function
}
});
}
// Here is your original code, modified to use the function:
jQuery(function () {
$("#next").click(scrollToNew);
});
Наконец, вы можете добавить код нажатия клавиш и вызвать функцию оттуда:
function scrollToNew () {
scrollTop = $(window).scrollTop();
$('.new').each(function(i, h2){ // loop through article headings
h2top = $(h2).offset().top; // get article heading top
if (scrollTop < h2top) { // compare if document is below heading
$.scrollTo(h2, 800); // scroll to in .8 of a second
return false; // exit function
}
});
}
jQuery(function () {
$("#next").click(scrollToNew);
$(document).keydown(function (evt) {
if (evt.keyCode == 40) { // down arrow
evt.preventDefault(); // prevents the usual scrolling behaviour
scrollToNew(); // scroll to the next new heading instead
}
});
});
Обновление. Чтобы прокрутить вверх, выполните два действия. Измените обработчик keydown
на:
$(document).keydown(function (evt) {
if (evt.keyCode == 40) { // down arrow
evt.preventDefault(); // prevents the usual scrolling behaviour
scrollToNew(); // scroll to the next new heading instead
} else if (evt.keyCode == 38) { // up arrow
evt.preventDefault();
scrollToLast();
}
}
и напишите scrollToLast()
функцию на основе scrollToNew()
, которая находит последний новый заголовок, которого нет на странице:
function scrollToLast () {
scrollTop = $(window).scrollTop();
var scrollToThis = null;
// Find the last element with class 'new' that isn't on-screen:
$('.new').each(function(i, h2) {
h2top = $(h2).offset().top;
if (scrollTop > h2top) {
// This one's not on-screen - make a note and keep going:
scrollToThis = h2;
} else {
// This one's on-screen - the last one is the one we want:
return false;
}
});
// If we found an element in the loop above, scroll to it:
if(scrollToThis != null) {
$.scrollTo(scrollToThis, 800);
}
}
person
davegurnell
schedule
30.01.2010