如何自定义fullpage.js右侧导航点？实现循环跳转与倒序排列

当然可行！针对你提出的两个需求（循环跳转+倒序导航点），咱们可以通过修改配置、自定义事件监听和少量调整来实现，结合你现有的代码一步步拆解：

一、实现导航点倒序排列 #

你已经设置了navigationTooltips:['5','4','3','2','1']，但默认导航点的顺序还是和anchors数组一致（对应part1到part5），要让导航点视觉上倒序且点击对应正确页面，推荐用下面的直接方案：

调整anchors与菜单顺序（最省心） #

直接把anchors数组倒序，这样fullpage生成的导航点自然就是倒序，同时把#menu里的菜单项也对应调整，确保菜单和导航点同步：

new fullpage('#fullpage',{ 
    autoScrolling: true, 
    navigation: true, 
    anchors: ['part5','part4','part3','part2','part1'], // 倒序排列锚点
    navigationTooltips:['5','4','3','2','1'], 
    showActiveTooltip: true, 
})

调整后的#menu代码：

<ul id='menu' style="list-style: none; padding-left: 0;"> 
    <li data-menuanchor="part5"><a href="#part5" ><span>BLOGS</span></a></li> 
    <li data-menuanchor="part4"><a href="#part4" ><span>SWIFT CONSERVATION</span></a></li> 
    <li data-menuanchor="part3"><a href="#part3" ><span>OUR COMPANY</span></a></li> 
    <li data-menuanchor="part2"><a href="#part2" style="padding-top: 0px;"><span>OUR SERVICES</span></a></li> 
    <li data-menuanchor="part1"><a href="#part1" style="display: none;"></a></li> 
    <a href="javascript:void(0);" class="icon" onclick="myFunction()"> 
        <i class="fa fa-bars"></i> 
    </a> 
</ul>

如果不想改锚点顺序，也可以用CSS强制倒序导航点，但需要额外处理点击事件，不如上面的方案直接。

二、实现循环跳转效果 #

fullpage.js没有内置循环导航功能，咱们可以通过监听导航点点击和页面滚动事件来实现：

1. 处理导航点点击的循环跳转 #

获取所有右侧导航点，给首尾两个点绑定自定义跳转逻辑：

document.addEventListener('DOMContentLoaded', function() {
    const fpNavItems = document.querySelectorAll('#fp-nav li');
    const totalSections = fullpage_api.getSections().length;

    fpNavItems.forEach((item, index) => {
        item.addEventListener('click', function(e) {
            // 点击最后一个导航点（对应第一页），跳转到最后一页
            if (index === totalSections - 1) {
                e.preventDefault();
                fullpage_api.moveTo(totalSections);
            } 
            // 点击第一个导航点（对应最后一页），跳转到第一页
            else if (index === 0) {
                e.preventDefault();
                fullpage_api.moveTo(1);
            }
        });
    });
});

2. 处理键盘/自动滚动的循环 #

如果需要支持键盘上下键滚动也能循环，加上fullpage的onLeave事件：

new fullpage('#fullpage',{ 
    // 原有配置...
    onLeave: function(origin, destination, direction) {
        const totalSections = fullpage_api.getSections().length;
        // 从第一页向上滚动，跳转到最后一页
        if (origin.index === 0 && direction === 'up') {
            fullpage_api.moveTo(totalSections);
            return false; // 阻止默认滚动行为
        }
        // 从最后一页向下滚动，跳转到第一页
        if (origin.index === totalSections - 1 && direction === 'down') {
            fullpage_api.moveTo(1);
            return false;
        }
    }
})

三、完整整合代码 #

把上面的配置和脚本整合后，最终代码如下：

JavaScript部分 #

document.addEventListener('DOMContentLoaded', function() {
    new fullpage('#fullpage',{ 
        autoScrolling: true, 
        navigation: true, 
        anchors: ['part5','part4','part3','part2','part1'], 
        navigationTooltips:['5','4','3','2','1'], 
        showActiveTooltip: true,
        onLeave: function(origin, destination, direction) {
            const totalSections = fullpage_api.getSections().length;
            if (origin.index === 0 && direction === 'up') {
                fullpage_api.moveTo(totalSections);
                return false;
            }
            if (origin.index === totalSections - 1 && direction === 'down') {
                fullpage_api.moveTo(1);
                return false;
            }
        }
    });

    // 导航点点击循环逻辑
    const fpNavItems = document.querySelectorAll('#fp-nav li');
    const totalSections = fullpage_api.getSections().length;

    fpNavItems.forEach((item, index) => {
        item.addEventListener('click', function(e) {
            if (index === totalSections - 1) {
                e.preventDefault();
                fullpage_api.moveTo(totalSections);
            } else if (index === 0) {
                e.preventDefault();
                fullpage_api.moveTo(1);
            }
        });
    });
});

HTML部分（调整后的菜单） #

<ul id='menu' style="list-style: none; padding-left: 0;"> 
    <li data-menuanchor="part5"><a href="#part5" ><span>BLOGS</span></a></li> 
    <li data-menuanchor="part4"><a href="#part4" ><span>SWIFT CONSERVATION</span></a></li> 
    <li data-menuanchor="part3"><a href="#part3" ><span>OUR COMPANY</span></a></li> 
    <li data-menuanchor="part2"><a href="#part2" style="padding-top: 0px;"><span>OUR SERVICES</span></a></li> 
    <li data-menuanchor="part1"><a href="#part1" style="display: none;"></a></li> 
    <a href="javascript:void(0);" class="icon" onclick="myFunction()"> 
        <i class="fa fa-bars"></i> 
    </a> 
</ul>

这样就能同时实现导航点倒序排列，以及点击首尾导航点、滚动边界时的循环跳转效果啦！

内容的提问来源于stack exchange，提问作者Wania Kanwal