有问题的fullpage.js跳转到不同的部分/幻灯片页面加载。场景:
目前有7个部分/幻灯片,其中有相当多的部分/幻灯片。每个幻灯片都有一个锚点,所以这些部分读取了mysite.com/anchor
问题:说你在mysite.com/anchor3上并刷新,因为网站正在加载并导航到另一张幻灯片,一旦加载了所有内容,网站会跳回到mysite.com/anchor3
我不知道还有什么要做,并尝试了以下内容:已初始化文档准备好的脚本未加载。并设置了css:
并且也做到了这一点。
html,
body,
#fullpage,
.section{
height: 100%;
}
任何想法都表示赞赏。这是视频显示问题。 https://dha4w82d62smt.cloudfront.net/items/2P2k3K2V3f0S002R2U1w/Screen%20Recording%202018-09-07%20at%2001.17%20PM.mov?X-CloudApp-Visitor-Id=2925693
我怀疑它与锚点有关,所以如果有一种方法可以禁用它们,除了删除它们之外我还想知道。
这是js
$('#fullpage').fullpage({
navigation:false,
autoScrolling:false,
menu:"#my-nav",
anchors: ['one', 'two', 'three', 'four', 'five', 'six'],
licenseKey: ('15560068-077B4EC4-B9C3AECE-631A2B58'),
verticalCentered: true,
onLeave: function(index, nextIndex, direction) {
activateNavItem($('#my-nav').find('li').eq(nextIndex - 1));
},
afterRender: function() {
activateNavItem($('#my-nav').find('li').eq($('.section.active').index()))
}
});
$('.bell').click(function() {
if ($("#socialmediaoverlay").hasClass("socialoverlay") && $(this).attr("id") != "socialmedialink") {
$("#socialmediaoverlay").fadeToggle();
$("#socialmediaoverlay").toggleClass("socialoverlay");
$("#fullpage").toggleClass("blurred");
}
var destination = $(this).closest('li');
$.fn.fullpage.moveTo(destination.index() + 1);
});
function activateNavItem(item) {
item.addClass('active').siblings().removeClass('active');
};
您可以考虑对需要花费很长时间才能加载导致问题的元素使用延迟加载。
任何媒体元素或图像都可以延迟加载。
只需使用data-src
而不是src
。这应该会使您的网站加载更快,并更快地滚动到该部分。