Question

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');
    };

Answer 1

您可以考虑对需要较长时间加载而导致问题的元素使用延迟加载。

任何媒体元素或图像都可以延迟加载。

只需使用data-src而不是src。这样可以使您的网站加载速度更快，并更快地滚动到该部分。

首次加载时，Fullpage.js内容会跳至该部分

1 个答案: