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