[英]jQuery: animate scroll to next only working once
I have a simple jQuery function whereby clicking on each instance of .load-more
will fade in the next instance of .inside
and scroll to it. 我有一个简单的jQuery函数,单击每个
.load-more
实例将在下一个.inside
实例中.inside
并滚动到它。 The first .load-more
click works fine, scrolls you down to .inside
successfully, but then clicking on the next .load-more
fades in the next instance of .inside
but is for some reason not scrolling to it, not too sure why? 第一次
.load-more
单击可以正常工作,将您成功向下滚动到.inside
,但是在下一个.inside
实例中,单击下一个.load-more
消失,但是由于某种原因未滚动到该位置,因此不太确定为什么?
jsFiddle demo: http://jsfiddle.net/neal_fletcher/K9nMS/5/ jsFiddle演示: http : //jsfiddle.net/neal_fletcher/K9nMS/5/
jQuery: jQuery的:
$(document).ready(function () {
var divs = $(".wrap > .div");
for (var i = 0; i < divs.length; i += 3) {
divs.slice(i, i + 3).wrapAll("<div class='inside'><div class='new'></div></div>");
}
});
$(document).ready(function () {
Resize();
});
$(window).resize(function () {
Resize();
});
function Resize() {
var windowHeight = $(window).height() + 'px';
$('.inside').css('height', windowHeight);
}
$(document).ready(function () {
$(".new .div:last-child").after("<span class='load-more'>More?</span>");
$('.inside').hide().filter(":first-child").show();
$('.load-more').click(function () {
var nextinside = $(this).parent().parent('.inside').nextAll(".inside:first"),
nextloadmore = $(this).nextAll(".load-more:first");
$(this).hide();
nextinside.fadeIn();
nextloadmore.fadeIn();
$('.wrap').animate({
scrollTop: nextinside.offset().top - 0
}, 700);
});
});
Any suggestions or solutions would be greatly appreciated! 任何建议或解决方案将不胜感激!
You need to change the position for scrolltop for each successive set as a multiple of the set index: 您需要将每个连续集合的滚动顶部位置更改为集合索引的倍数:
scrollTop: nextinside.index() * nextinside.offset().top
I have it working for you here: http://jsfiddle.net/K9nMS/7/ 我在这里为您工作: http : //jsfiddle.net/K9nMS/7/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.