使用键盘导航平滑滚动

Question

我正在尝试使用 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();
    }       
});

Answer 1

当您使用键盘导航时，您没有使用参数调用您的 goToByScroll 函数 - 看起来这就是它不起作用的原因。您需要跟踪您的活动数据幻灯片，以便您可以将该变量传递给您的密钥处理程序中的 goToByScroll 函数。

看起来像这样（这真的很粗糙）：

var currentDataSlide = 0;

function goToByScroll(dataslide) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
    }, 2000, 'easeInOutQuint');

    currentDataSlide = dataslide;
}
mywindow.keydown(function(e) {
    if(e.keyCode == 40) { //DOWN
        e.preventDefault();
        alert('Down Arrow Has Been Pressed');
        goToByScroll(currentDataSlide + 1);
    }
    else if (e.keyCode == 38) { //UP
        e.preventDefault();
        alert('Up Arrow Has Been Pressed');
        goToByScroll(currentDataSlide - 1);
    }       
});

这并不完美，但我们的想法是跟踪您的位置（滑动方式）并在您使用键处理程序时传递该变量。