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 - 点击博客图片滚动到下一个博客项目

回答

相关问题