прокрутка элементов h2 с помощью scrollTo в jquery - PullRequest
Новая
       4

прокрутка элементов h2 с помощью scrollTo в jquery

0 голосов
/ 18 июня 2010

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

 $(document).ready(function(){

 $('#down').click(function(){

  $("#container h2").each(function(i,h2){
   $("#wrap").scrollTo(h2, 800, { axis:'y' });

     });
    });

 $('#up').click(function(){

      $("#container h2").reverse().each(function(i,h2){
   $("#wrap").scrollTo(h2, 800, { axis:'y' });
     });
    });
 jQuery.fn.reverse = function() {

  return this.pushStack(this.get().reverse(), arguments);

};
});

1 Ответ

0 голосов
/ 18 июня 2010

Ну, вы звоните each(), поэтому вы выполняете прокрутку для каждого h2 за клик.Отслеживайте, к какому элементу вы перешли, прокручивали и только прокручивали до следующего, например: 

 $(document).ready(function(){
     var next = 0;
     $('#down').click(function(){
        $("#wrap").scrollTo($("#container h2").eq(next), 800, { axis:'y' });
        next++;
     });
 });

Обновление:

Вы должны убедиться, что счетчикне увеличивать или уменьшать слишком сильно.Я также немного изменил его, чтобы не всегда использовать селектор для поиска всех элементов h2.Достаточно получить их один раз.Контр-проверка также должна устранить проблему, когда вы находитесь на последнем элементе и нажмите down (соответственно, когда вы находитесь на первом элементе и нажмите up): 

 $(document).ready(function(){
     var elements = $("#container h2");
     var next = 0;
     var max = elements.length;
     $('#down').click(function(){
        if(next+1 < max) {
            next++;
            $("#wrap").scrollTo(elements[next], 800, { axis:'y' });
        }
     });

     $('#up').click(function(){
        if(next-1 > -1) {
            next--;
            $("#wrap").scrollTo(elements[next], 800, { axis:'y' });
        }
     });
 });
...