我有一个简单的jQuery函数,单击的每个实例.load-more
将在的下一个实例中消失.inside
并滚动到它。第一次.load-more
单击可以正常工作,将您向下滚动到.inside
成功,但是在下.load-more
一个实例中单击下一个会逐渐消失,.inside
但是由于某种原因未滚动到该位置,因此不太确定为什么?
jsFiddle演示:http : //jsfiddle.net/neal_fletcher/K9nMS/5/
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);
});
});
任何建议或解决方案将不胜感激!
您需要将每个连续集合的滚动顶部位置更改为集合索引的倍数:
scrollTop: nextinside.index() * nextinside.offset().top
我在这里为您工作:http : //jsfiddle.net/K9nMS/7/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句