使用键盘导航平滑滚动

Question

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

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