Smooth Scroll with Keyboard Navigation

Question

I'm looking to try and add some keyboard navigation using the Waypoints and Stellar jQuery Plugins. I have my smooth scroll all setup so that when you click the link it takes you to the appropriate data-slide position.

I'm trying to implement a keyboard nav so that when the up and down keys are pressed it takes you to the next or previous data slide. I thought I was on the right track, but doesn't seem to be coming together.

It looks like I am getting the keydown function to work appropriately, but just not the scroll to the respective data-slide position.

Any help would greatly be appreciated! Thanks!

Waypoint/Smooth Scroll Nav

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);

});

My Code for Keyboard Nav:

 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

You're not calling your goToByScroll function with an argument when you use the keyboard navigation - it looks like that's why it's not working. You'll need to keep track of your active dataslide so that you can pass that variable to your goToByScroll function in your keyhandlers.

It'd look something like this (this is really crude):

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);
    }       
});

That's not perfect, but the idea is to keep track of where you are (slide-wise) and pass that variable when you use your keyhandlers.