好吧,我知道这会给每个人带来问题,也给我带来问题。我在客户的网站上使用无限滚动插件,结合同位素插件按顺序加载他们的产品,问题是,因为他们有 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);
});
});
任何解决方案或建议将不胜感激!
你可以试试滚动框架 https://github.com/artsy/scroll-frame.它有点旧可能是您的答案。这是一个链接无限滚动演示 http://artsy.github.io/scroll-frame/demo.html使用它。
scrollFrame 将劫持用户对与您传入的查询选择器相匹配的元素的点击,并且不会重新加载页面,而是会附加一个位于视口顶部并指向元素的 href 的类似模式的 iframe。然后,它使用 HTML5 历史记录 API 使后退按钮按预期运行。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)