Smooth Scroll with Keyboard Navigation

Question

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

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

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

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

Точку/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); 

}); 

Мой код для клавиатуры 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

Вы не звонит 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); 
    }  
}); 

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