Прокрутите до следующего div на клик, от текущего местоположения

Question

В моем текущем решении прокрутить из div в другой div я поддерживаю как previous, так и next.

Это работает, сохраняя индекс последней прокрутки div, чтобы определить, где прокрутить страницу до следующего. Однако это прерывается, когда пользователи прокручивают свое колесо. Мне было интересно, есть ли способ вычислить, какой div находится ближе всего к верхней части окна, чтобы затем определить, какой индекс прокручивается до следующего.

Это в ответ устранит проблемы, которые у меня возникают.

ошибка Тест с использованием моего текущего решения:

---

1. Перейти к jsfiddle ссылке
2. Нажмите стрелку вниз в два раза. Он должен прокручиваться от одного div до следующего.
3. Далее, используя колесо на вашей мыши, прокрутите страницу вниз на 3/4 страницы.
4. Теперь снова нажмите стрелку вниз. Вы увидите, что он возвращает вас к вершине, где вы в последний раз перестали уходить.

http://jsfiddle.net/JokerMartini/yj9pvz2a/1/

var curr_el_index = 0; 
var els_length = $(".section").length; 

    $('.btnNext').click(function() { 
     curr_el_index++; 
     if (curr_el_index >= els_length) curr_el_index = 0; 
     $("html, body").animate({ 
      scrollTop: $(".section").eq(curr_el_index).offset().top - 20 
     }, 700); 
    }); 

    $('.btnPrev').click(function() { 
     curr_el_index--; 
     if (curr_el_index < 0) curr_el_index = els_length - 1; 
     $("html, body").animate({ 
      scrollTop: $(".section").eq(curr_el_index).offset().top - 20 
     }, 700); 
    }); 

---

Решение Обновлено:http://jsfiddle.net/JokerMartini/82wo9e3c/1/

Answer 1

попробуйте добавить это дело с скроллинга страницы. демо: http://jsfiddle.net/yj9pvz2a/2/

var section_height = $(".section").height() + 80; //80 margins 

$(window).on('scroll', function() { 
    curr_el_index = Math.floor($(window).scrollTop()/section_height); 
}); 

объяснение: так что вы испытываете в вашем коде, что, когда пользователь оленьей кожи использовать навигацию для перемещения к различным разделам, то curr_el_index остается тем же самым. эта функция $(window).scroll() учитывает прокрутку не от ваших кнопок навигации.

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

Answer 2

Вы можете получить текущее смещение элемента относительно документа, используя смещение jquery (http://api.jquery.com/offset/). Таким образом, вы могли бы использовать что-то вроде этого:

function getTopElement(elements){ 
    var topEl; 
    $.each(elements, function(index,el){ 
    if(!topEl || topEl.offset().top < el.offset().top){ 
     topEl = el; 
    } 
}); 

    return topEl; 
} 

Answer 3

Согласно this answer, есть способ вычислить расстояние DIV от верхней части окна просмотра, чтобы быть конкретным, как это:

($element.offset().top - $(window).scrollTop()) 

Итак, вам просто нужно найти тот, у которого минимальное положительное значение:

var closest_to_top = $('.section').toArray().reduce(function(curr, section) { 
    var bottom = $(section).offset().top + $(section).height() 
    var distance = (bottom - $(window).scrollTop()) 
    if (distance < 0) return curr 
    return distance > curr.distance ? curr : { 
     distance : distance, 
     section : section 
    } 
}, {section:null, distance:+Infinity}).section 

Это самая высокая секция, нижняя часть которой находится ниже верхней части видовой экран. Удалите +$(section).height(), если требуется верх раздела.