jQuery плавный свиток к якорю

Question

Я написал довольно простую функцию прокрутки с использованием расширения jQuery mousewheel и не имел опыта работы с $.mousewheel У меня возникла проблема.

В основном, когда south delta называется, я называю $.animate функцию с помощью scrollTop к классу .anchor

HTML (упрощен вопрос):

<div id="static-section" class="anchor"></div> <!-- width: 100%; height: 258px --> 
<div id="alt-section" class="anchor"></div> <!-- width: 100%; height: 346px --> 

JQuery:

$(document).ready(function() { 
    $("body").mousewheel(function(event, delta, deltaX, deltaY) { 
     if(delta > 0) { 
      console.log("North: " + delta); 
     } 

     else if(delta < 0) { 
      console.log("South: " + delta); 
      // ANIMATE TO ANCHOR FUNCTION 
      $("html,body").animate({scrollTop: $(".anchor").offset().top}, "slow"); 
     } 

     return false; 
    }); 
}); 

Итак: моя проблема заключается в том, что она оживляет только к экземпляру первым из .anchor (который был бы #static-section) Я пытался делать scrollTop: $(".anchor").next().top, которые, очевидно, не работает, хотя не появляются ошибки, он все еще только одушевляет к первому пример. Мое первое предположение заключалось в том, чтобы использовать цикл for, и я попробовал его, но он не работал (никаких ошибок на нем тоже.) Я никогда не использовал для петель for раньше, поэтому я не уверен, или не то, что я сделал, было правильным. Любая помощь приветствуется!

Примечание: jsFiddle (с тем же кодом, что и мой сайт) не изображает то же самое, что я уже сделал, поэтому нет живой демонстрации. Если вам это нужно, я предоставил URL-адрес по запросу. :-)

Answer 1

Нечто подобное будет пошагово .anchor теги:

$(document).ready(function() { 
    var $anchor = $('.anchor'); 
    $("body").mousewheel(function(event, delta, deltaX, deltaY) { 
     if(delta > 0) { 
      console.log("North: " + delta); 
     } 

     else if(delta < 0) { 
      console.log("South: " + delta); 
      // ANIMATE TO ANCHOR FUNCTION 
      $("html,body").animate({scrollTop: $anchor.offset().top}, "slow"); 
      $anchor = $anchor.next('.anchor'); 
     } 

     return false; 
    }); 
});