我在自己正在构建的网站上有一个日记/博客部分,我正在尝试编写一些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);
});

最佳答案

根据图像的结构,您将需要获得图像的父级,该父级是一个带有each-slide类的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/

10-05 20:44
查看更多