прокрутить к следующему/предыдущему якорю с помощью клавиш со стрелками или кнопки?

Уже неделю гуглю и никак не пойму как это все совместить :(

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

Соответствующее исследование я нашел на следующих страницах:

Лучшее, что я смог придумать, это это, но оно не работает:

$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
        case 37:
              evt.preventDefault(); 
              $.scrollTo('+=564px', 800, { axis:'x' }); 
                    break;
                }
});


$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
                    case 39:
              evt.preventDefault();
              $.scrollTo('-=564px', 800, { axis:'x' });
                    break;
                }
});

Разве нет простого способа создать якоря или классы div, которые можно прокручивать с помощью клавиш со стрелками или нажатия кнопок со стрелками? Я довольно потерян здесь. Может быть, я слишком много прошу, но если кто-то может указать мне правильное направление, я был бы признателен, спасибо :)


jquery scrollto
person Jenny Westburg    schedule 07.12.2011    source источник
comment
Почему вы не можете опубликовать свой код? Было бы очень полезно увидеть, что у вас уже есть.   -  person Rory McCrossan    schedule 07.12.2011
comment
спасибо за ответы, обновил мой код и сейчас читаю ответы...   -  person Jenny Westburg    schedule 08.12.2011

Ответы (2)


arrow_upward
1
arrow_downward 

$('document').keypress(function(e) {
   if (e.which == 38) {
       //scroll up
   } else if (e.which == 39) {
       //scroll right
   } else if (e.which == 40) {
       //scroll down
   } else if (e.which == 37) {
       //scroll left
   }   
});

Используйте .animate(), чтобы создать эффект прокрутки, и используйте e.preventDefault();, чтобы предотвратить перемещение клавиш по умолчанию. в каждом из этих блоков if.

person rkw    schedule 07.12.2011

arrow_upward
0
arrow_downward

Следующий код обнаружит нажатия клавиш со стрелками влево/вправо:

$("body").keydown(function(e) {
    if (e.which == 37) { 
        // left arrow pressed
    }
    else if (e.which == 39) { 
        // right arrow pressed
    }
});

Вам просто нужно добавить логику слайдов для каждого условия.

person Rory McCrossan    schedule 07.12.2011