你可以使用
keydown
事件监听器来监听按键。你可以在
<input>
字段等上使用它。因为keydown事件
bubble冒泡到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) {
alert("You pressed down.");
}
});
});
现在您需要绑定实际跳转到下一个标题的代码。我建议将代码抽象为一个函数,这样您可以将其用于按键和点击。以下是该函数以及使用它的原始代码变体:
function scrollToNew () {
scrollTop = $(window).scrollTop();
$('.new').each(function(i, h2){
h2top = $(h2).offset().top;
if (scrollTop < h2top) {
$.scrollTo(h2, 800);
return false;
}
});
}
jQuery(function () {
$("#next").click(scrollToNew);
});
最后,你可以添加按键代码并从那里调用函数:
function scrollToNew () {
scrollTop = $(window).scrollTop();
$('.new').each(function(i, h2){
h2top = $(h2).offset().top;
if (scrollTop < h2top) {
$.scrollTo(h2, 800);
return false;
}
});
}
jQuery(function () {
$("#next").click(scrollToNew);
$(document).keydown(function (evt) {
if (evt.keyCode == 40) {
evt.preventDefault();
scrollToNew();
}
});
});
更新:要向上滚动,请执行两个操作。将keydown
处理程序更改为:
$(document).keydown(function (evt) {
if (evt.keyCode == 40) {
evt.preventDefault();
scrollToNew();
} else if (evt.keyCode == 38) {
evt.preventDefault();
scrollToLast();
}
}
根据 scrollToNew()
编写一个 scrollToLast()
函数,找到最后一个未在页面上显示的新标题:
function scrollToLast () {
scrollTop = $(window).scrollTop();
var scrollToThis = null;
$('.new').each(function(i, h2) {
h2top = $(h2).offset().top;
if (scrollTop > h2top) {
scrollToThis = h2;
} else {
return false;
}
});
if(scrollToThis != null) {
$.scrollTo(scrollToThis, 800);
}
}