Плавная прокрутка с навигацией с помощью клавиатуры

Я хочу попробовать добавить навигацию с помощью клавиатуры с помощью плагинов Waypoints и Stellar jQuery. У меня есть плавная прокрутка всех настроек, так что, когда вы нажимаете на ссылку, вы попадаете в соответствующую позицию слайда данных.

Я пытаюсь реализовать навигацию на клавиатуре, чтобы при нажатии клавиш вверх и вниз вы переходили к следующему или предыдущему слайду данных. Я думал, что я на правильном пути, но, похоже, не сходится.

Похоже, я заставляю функцию нажатия клавиши работать должным образом, но не прокручиваю до соответствующей позиции слайда данных.

Любая помощь будет принята с благодарностью! Спасибо!

Путь/Плавная прокрутка навигации

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

javascript jquery smooth-scrolling jquery-waypoints
person Seth Douwsma    schedule 13.11.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы не вызываете свою функцию 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);
    }       
});

Это не идеально, но идея состоит в том, чтобы отслеживать, где вы находитесь (по слайдам), и передавать эту переменную, когда вы используете свои обработчики клавиш.

person jedd.ahyoung    schedule 14.11.2013
comment
Это было и моей заботой. Отслеживал текущий слайд данных. Разве это не то, что здесь происходит: dataslide = $(this).attr('data-slide'); Есть ли способ передать следующий или предыдущий слайд? - person Seth Douwsma; 14.11.2013
comment
if (direction === 'вниз') { $('.navigation li[data-slide=' + dataslide + ']').addClass('active').prev().removeClass('active'); } else { $('.navigation li[data-slide=' + dataslide + ']').addClass('active').next().removeClass('active'); } Так, например, они используют функцию «следующий» или «предыдущий», чтобы определить, какой слайд также должен быть в активном состоянии. Разве тот же принцип не применим к переходу на следующий и предыдущий слайд. Но как передать это в функцию прокрутки? - person Seth Douwsma; 14.11.2013
comment
Если это так, и dataslide является вашей переменной отслеживания, то посмотрите на свой обработчик клавиатуры — передайте dataslide вашей функции прокрутки в обработчике клавиш. Вы ничего туда не передаете - вы просто вызываете gotobyscroll() без обязательного аргумента. - person jedd.ahyoung; 14.11.2013
comment
Я понимаю, что мне нужно было привести аргумент, но я не думаю, что слайд с данными был правильным аргументом. Я обновил код, чтобы передать dataslide + 1 и dataslide - 1 для следующего и предыдущего. Это не совсем правильно. Если вы находитесь в начале слайда и нажмите клавишу вниз. Он срабатывает, вы получаете предупреждающее сообщение, но слайд не перемещается вниз. Если вы находитесь в середине текущего слайда, нажмите клавишу вверх или вниз. Он прокручивается до верхней части текущего слайда. Вот ссылка для предварительного просмотра в реальном времени. Очевидно, что это все еще находится в разработке. myedencreative.com/vantage_point - person Seth Douwsma; 14.11.2013
comment
Теперь, когда я увидел ваш полный код, ответ отрицательный - dataslide установлен внутри вашего обработчика путевых точек, и я ничего не знаю об этой библиотеке. Попробуйте добавить var currentSlide = 0 рядом с другими вашими объявлениями после вашего оператора document.ready и используйте currentSlide в своих аргументах. - person jedd.ahyoung; 17.11.2013
comment
Спасибо за помощь! Я согласился с вашим предложением установить другую переменную. Оттуда все, что мне нужно было сделать, это увеличить положение слайда в зависимости от того, двигался я вверх или вниз. Благодарим вас за то, что вы нашли время и дали какое-то направление! - person Seth Douwsma; 18.11.2013