jQuery/JS–点击博客图片滚动到下一个博客项目

jQuery/JS – click blog image scroll to next blog item

本文关键字：滚动 下一个 项目 jQuery JS      更新时间：2023-09-26

我正在构建的一个网站上有一个日志/博客部分，我正在尝试编写一些JS/jQuery，允许点击每个博客项目上的任何图像，以平滑地向下滚动到下一个博客项目。如果你正在查看当前博客项目，但可以看到上一个博客项目的图像，然后单击该图像，它会将你带到该博客项目的顶部。

我想这在很大程度上与滚动位置和视图有关。如果查看当前文章并单击，则滚动到下一篇文章。如果你点击了刚刚看到的上一篇或下一篇文章的图片，你就会转到该文章。

这种效果与此非常相似>http://www.morganstudio.co.uk/journal/我已经建立了一个快速jsFiddlehttp://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);
});

根据图像的结构，您将需要获得图像的父级，该父级是每个幻灯片的类的div。然后将animate"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/

相关文章：