我正在尝试使用 Waypoints 和 Stellar jQuery 插件添加一些键盘导航。我有我的平滑滚动所有设置,因此当您单击链接时,它会将您带到适当的数据幻灯片位置。
我正在尝试实现键盘导航,以便在按下向上和向下键时,它会将您带到下一张或上一张数据幻灯片。我以为我在正确的轨道上,但似乎并没有走到一起。
看起来我正在让 keydown 功能正常工作,但不是滚动到相应的数据幻灯片位置。
任何帮助将不胜感激!谢谢!
航点/平滑滚动导航
slide.waypoint(function (event, direction) {
dataslide = $(this).attr('data-slide');
if (direction === 'down') {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
}
else {
$('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
}
});
mywindow.scroll(function () {
if (mywindow.scrollTop() == 0) {
$('.navigation li[data-slide="1"]').addClass('active');
$('.navigation li[data-slide="2"]').removeClass('active');
}
});
function goToByScroll(dataslide) {
htmlbody.animate({
scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
}, 2000, 'easeInOutQuint');
}
links.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
button.click(function (e) {
e.preventDefault();
dataslide = $(this).attr('data-slide');
goToByScroll(dataslide);
});
我的键盘导航代码:
mywindow.keydown(function(e) {
if(e.keyCode == 40) { //DOWN
e.preventDefault();
alert('Down Arrow Has Been Pressed');
goToByScroll();
}
else if (e.keyCode == 38) { //UP
e.preventDefault();
alert('Up Arrow Has Been Pressed');
goToByScroll();
}
});