Прокрутка вниз к следующему элементу с помощью плагина keypress и scrollTo - jQuery - PullRequest
Новая
       19

Прокрутка вниз к следующему элементу с помощью плагина keypress и scrollTo - jQuery

2 голосов
/ 18 июля 2009

Я использую плагин jQuery scrollTo для прокрутки вверх и вниз по моей странице, используя стрелки ВВЕРХ и ВНИЗ.

У меня есть куча div с классом "screen", вот так: <div class="screen-wrapper">...</div>

То, что я пытаюсь сделать, это когда я нажимаю UP или DOWN, окно прокручивается к следующему или предыдущему div с классом "screen".

Я позаботился о клавишах. Согласно документации плагина, для прокрутки окна вы используете $ .scrollTo (...);

Вот код, который у меня есть: 

$(document).keypress(function(e){
    switch (e.keyCode) {
        case 40:    // down
            n = $('.screen-wrapper').next()
            $.scrollTo( n, 800 );
          break;
        case 38:    // up

          break;
        case 37:    // left

          break;
        case 39:    // right

          break;

    }      
});

И если это поможет, вот HTML-div. У меня есть несколько из них на странице, и, по сути, я пытаюсь перейти к следующему, нажав стрелку вниз: 

<div class='screen-wrapper'>
<div class='screen'>
    <div class="sections">
        <ul>
            <li><img src="images/portfolio/sushii-1.png " /></li>
            <li><img src="images/portfolio/sushii-2.png" /></li>
            <li><img src="images/portfolio/sushii-3.png" /></li>
        </ul>
    </div>

    <div class="next"></div>
    <div class="prev"></div>
</div>

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

редактировать И я забыл упомянуть, что реальный вопрос здесь. Вопрос / проблема в том, что он не будет прокручиваться ниже первого элемента, как упоминалось seth .

Ответы [ 2 ]

4 голосов
/ 18 июля 2009

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

            n = $('.screen-wrapper').next()

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

          var s = $('.screen');
          var curr=-1, node;

          $(document).keypress(function(e){
             switch( e.keyCode ) {
               case 40:
                  node = s[++curr];
                  if (node) {
                    $.scrollTo( node,800);
                  }
                  else {
                    curr = s.length-1;
                  }
                  break;
                case 38:
                   node = s[--curr];
                   if (node) {
                     $.scrollTo( node ,800);
                   }
                   else {
                      curr = 0;
                    }
                   break;
                }
          });
1 голос
/ 18 июля 2009

Я только что реализовал нечто подобное и использовал id атрибуты для каждого элемента.

Почему бы не сделать что-то вроде 

window.location.href = '#section-' + curr;

вместо использования scrollTo?

...