jQuery/JS - 點擊博客圖片滾動到下一個博客項目

我在我正在構建的站點上有一個日誌/博客部分，並且我正在嘗試編寫一些JS/jQuery，以允許點擊每個博客上的任何圖像項目，以平滑向下滾動到下一個博客項目。如果您正在查看當前的博客文章，但可以看到上一篇博客文章中的圖片，然後點擊該圖片，則會將您帶到該博客文章的頂部。jQuery/JS - 點擊博客圖片滾動到下一個博客項目

我想很多這將是滾動位置和視圖。如果查看當前帖子並單擊，則滾動到下一篇文章。如果您點擊剛纔查看的前一個或下一個帖子的圖片，就可以轉到該帖子。

此效果與此非常相似>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); 
});

來源

2014-09-23 John the Painter

基於你將要得到的圖像的父母這與類各個----一個div您的圖像的結構滑動。然後將動畫「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/

來源

2014-09-24 00:01:31 marty

謝謝@marty！對不起，如果這不明確，但點擊該文章中的任何圖像是去下一篇文章...不是下一個圖像。如果這是有道理的。我可以很容易地將您的解決方案更改爲'$ this.parents（'。each-journal-entry'）。next（）'這是可行的，但理想情況下，如果您單擊上一篇文章的圖像，則會轉到該文章的頂部。 – 2014-09-24 07:25:06

我更新了上面的答案，做我認爲你所要求的。請記住，這可能會爲用戶造成意想不到的行爲。我不希望在博客文章中點擊圖片會讓我看到下一篇文章。 – marty 2014-09-24 10:08:43

jQuery/JS - 點擊博客圖片滾動到下一個博客項目

回答

相關問題