jQuery/JS - прокрутите до следующего элемента при щелчке (прокручиваемые вопросы)

Question

У меня есть простой блог, и у каждого сообщения в блоге есть несколько изображений от 1 до 10. Если вы нажмете на любое из изображений в сообщении , он должен прокрутить вас до следующего сообщения. Я думал, что-то же просто, как это работало бы:

$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() { 
    var $this = $(this); 
    $('.journal-container').animate({ 
     scrollTop: $this.closest('.each-journal-entry').next().offset().top 
    }, 500); 
}); 

Но когда я нажимаю еще одно изображение, за исключением первого, он просто прокручивается на нечетной позиции.

мне удалось добиться этого с некоторой помощью, и вы можете видеть вывод здесь: http://jsfiddle.net/w7rtcmp0/3/, который прекрасно работает, но разница для меня является то, что мое содержание в прокрутке DIV (следовательно .journal-container и не html, body

.

Любые идеи, почему я с этим вопросом? Я создал jsFiddle с прокруткой DIV, а если щелкнуть изображение дальше ... он повторяет этот вопрос ... так что надеюсь, что это помогает.

http://jsfiddle.net/w7rtcmp0/5/

Спасибо.

Answer 1

JQuery регулирует offset().top() на основе текущей позиции прокрутки.

Использование offsetTop свойства в JavaScript должен решить проблему:

scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop 

Fiddle: http://jsfiddle.net/m7cm5oL6/

Answer 2

Возможно, вы захотите взглянуть на Ariel Flesler's jQuery scrollTo plugin, у меня была такая же проблема, и с помощью этой функции я сохранил часы отладки.

Answer 3

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

Здесь я устанавливаю переменную высоты и устанавливаю ее на высоту текущего объекта журнала/блога. Это позволяет мне прокручивать мою высоту вплоть до следующего доступного объекта блога.

http://jsfiddle.net/w7rtcmp0/24/

$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function()  { 
    $this = $(this); 
    var height = $this.closest('.each-journal-entry').height(); 

    $('.scrollable').animate({ 
    scrollTop: height 
    }, 2000); 
});