Фикса для перехода к следующему DIV с помощью кнопок

Question

Так что я this code который позволяет мне прокручивать дивы со следующими кнопками предыдущего и , скрипт работает хорошо, хотя я пытался найти способ решить немного проблема в том, что когда я обычно прокручиваю колесико мыши или полосу прокрутки, а затем возвращаюсь к прокрутке с помощью кнопок, кнопки прокручивают страницу до того места, где я прокручивал ранее кнопки, и я хотел, чтобы это продолжалось, где я есть, для Например, если я прокручиваю колесико мыши до div nr.3, я хочу, чтобы он продолжал прокручиваться до div nr.4, когда я нажимаю на следующую кнопку. Возможно, создав: видимое заявление или что-то сделанное, но я не знаю, как его написать. Вот код

$('div.postSection').first(); 

$('a.display').on('click', function(e) { 
    e.preventDefault(); 

     var t = $(this).attr('id'), 
     that = $(this); 

    if (t === 'nextButton' && $('.currentPost').next('div.postSection').length > 0) { 
     var $next = $('.currentPost').next('.postSection'); 
     var top = $next.offset().top; 

     $('.currentPost').removeClass('currentPost');  
     $(function() { 
       $next.addClass('currentPost'); 
       $('html, body').animate({scrollTop: $('.currentPost').offset().top-55 }, 'slow'); 

     }); 
    } else if (t === 'prevButton' && $('.currentPost').prev('div.postSection').length > 0) { 
     var $prev = $('.currentPost').prev('.postSection'); 
     var top = $prev.offset().top; 

     $('.currentPost').removeClass('currentPost'); 

     $(function() { 
       $prev.addClass('currentPost'); 
       $('html, body').animate({scrollTop: $('.currentPost').offset().top-55 }, 'slow'); 
     }); 
    } 
}); 

Answer 1

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

Или, что я только что нашел, было хорошим небольшим расширением селектора, чтобы получить элементы в видимой области (видовой экран - и он назван таким). Просто получите первый() или последний(), основанный на следующем или предыдущем клике, и работайте с ним.

Viewport: http://www.appelsiini.net/projects/viewport

Расширения работают как:

$currentPS = $('.postSection:in-viewport').first(); 

Тогда вы просто обновить вас рядом и предыдущая:

var $next = $currentPS.next('.postSection'); 

var $prev = $currentPS.prev('.postSection'); 

Кажется, работает очень хорошо: http://jsfiddle.net/j7e9cogs/2/