scrollTop() function бесконечный цикл

Question

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

настоящее время у меня это:

var currDiv = 1; 

$(window).scroll(function(event) 
{ 

if (currDiv == 1) 
{ 

    $('html, body').animate({ 
     scrollTop:$('div.container').offset().top 
    }, 'slow'); 

    currDiv = 2; 

} 

else if (currDiv == 2) 
{ 

    $('html, body').animate({ 
     scrollTop:$('div.albums').offset().top 
    }, 'slow'); 

    currDiv = 1; 

} 

}); 

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

http://jsfiddle.net/644eghbw/1/ Вот jsfiddle, демонстрирующий проблему

Answer 1

Вы анимировать позицию прокрутки на событии прокрутки. Анимация положения прокрутки вызывает прокрутку событий, создавая тем самым бесконечный цикл.

Вам нужно убедиться, что вы не создаете другую анимацию прокрутки во время работы текущего. Вы можете использовать переменную и обратный вызов анимации для ее установки. Вот less-than-perfect example, который продемонстрировал основные понятия.

var currDiv = 1; 
var scrolling = false; 

$(window).scroll(function(event) 
{ 
    if (!scrolling) 
    { 
     if (currDiv == 1) 
     { 
      $('html, body').animate({ 
       scrollTop:$('.one').offset().top 
      }, 'slow', function() { 
       setTimeout(function() { 
        scrolling = false; 
       }, 1000); 
      }); 
      scrolling = true; 
      currDiv = 2; 
     } 
     else if (currDiv == 2) 
     { 
      $('html, body').animate({ 
       scrollTop:$('.two').offset().top 
      }, 'slow', function() { 
       setTimeout(function() { 
        scrolling = false; 
       }, 1000); 
      }); 
      scrolling = true; 
      currDiv = 1; 
     } 
    } 
});