好的,所以我知道这会引起每个人的问题,并且也会引起我的问题。我正在客户网站上使用无限滚动插件,并与同位素插件结合使用,以便按顺序加载其产品,但问题是,由于他们有1000多种产品,因此任何人浏览该站点然后单击进入某个产品,返回按钮,它们将返回顶部(或正好在第一页的折叠上方),这会引起很多问题。
我的标记如下:
$(window).load(function () {
var $container = $('.products-grid-wrap');
$container.imagesLoaded(function () {
$container.isotope({
itemSelector: '.products-grid-block',
filter: '*:not(.hidden), .products-grid-block',
animationEngine: 'best-available',
layoutMode: "perfectMasonry",
perfectMasonry: {
columnWidth: 280,
rowHeight: 310
}
});
$container.infinitescroll({
navSelector: '#page_nav', // selector for the paged navigation
nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector: '.regular-product-block, .products-grid-block', // selector for all items you'll retrieve
pixelsFromNavToBottom: Math.round($(window).height() * 1.5),
bufferPx: Math.round($(window).height() * 1.5),
loading: {
finishedMsg: 'No more products to load.',
img: 'http://www.by-form.net/wp-content/uploads/2014/11/ajax-loader-big.gif'
}
},
// call Isotope as a callback
function (newElements) {
var $newElems = $(newElements);
$newElems.imagesLoaded(function () {
$container.isotope('insert', $newElems);
$('.products-grid-rollover-block').hide();
if(newElements.length > 0){
setTimeout(function () {
$container.infinitescroll('retrieve');
$('.products-grid-wrap').isotope('reLayout');
//$('.products-grid-wrap').isotope({
//sortBy: 'category',
//sortAscending: false });
}, 1000);
}
});
});
setTimeout(function () {
$container.infinitescroll('retrieve');
}, 3000);
});
});
任何解决方案或建议将不胜感激!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句