jQuery/JS - щелкните изображение блога прокрутите до следующего элемента блога

Question

У меня есть раздел журнала/блога на сайте, который я создаю, и я пытаюсь написать JS/jQuery, который позволит нажимать на любое изображение в каждом блоге , чтобы сгладить прокрутку вниз до следующего элемента блога. Если вы просматриваете текущий элемент блога, но можете увидеть изображение из предыдущего элемента блога и щелкнуть мышью по нему, это приведет вас к вершине этого элемента блога.

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

Этот эффект очень похож на это>http://www.morganstudio.co.uk/journal/ я построил быстрый jsFiddle http://jsfiddle.net/qfmejz81/1/ работать с и использовать некоторые из кода с этого сайта, чтобы построить то, что я чувствовал бы работать, но это, кажется, не работает 100% (она стремится прокручивать только немного вниз на мыши, а не к следующему сообщению)

// Journal click image to scroll 
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() { 
    var e = $(this).parents('.each-journal-entry'); 
    var t = e.offset().top; 
    var n = e.height(); 
    var r = $(window).scrollTop(); 
    var i = $(window).height(); 
    var s = null; 
    if (t + n/2 < r) { 
     s = e; 
    } else if (t + n/2 - 48 > r + i) { 
     s = e; 
    } else { 
     s = e.nextAll('.each-journal-entry'); 
    } 
    var o = s.offset().top; 
    var u = s.height(); 
    var a = o - ($(window).height() - u)/2; 
    $('body').stop().animate({ 
     scrollTop: a 
    }, 500); 
}); 

Answer 1

Основываясь на структуру ваших изображений вы хотите получить родитель изображений, которое является DIV с классом each- горка. Затем установите свойство анимации «scrolltop» в начало следующего элемента.

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

    $('html, body').animate({ 
     scrollTop: $this.closest('.each-journal-entry').next().offset().top 
    }, 2000); 
}); 

http://jsfiddle.net/w7rtcmp0/3/