锚不再起作用

Question

我是 Javascript 的初学者，我的网站有一些问题... 我正在使用 fullPage.js 脚本和另一个带有隐藏子菜单的垂直菜单脚本。 我的导航菜单脚本不适用于 fullPage.js。看起来不错，但我的锚不再工作了。

我可能在某个地方做错了，但我找不到在哪里。

$(document).ready(function () {
    $.fn.fullpage({
        verticalCentered: false,
        resize: true,
        scrollingSpeed: 750,
        easing: 'easeInQuad',
        navigation: false,
        navigationPosition: 'left',
        navigationTooltips: ['firstSlide', 'secondSlide'],
        slidesNavigation: true,
        slidesNavPosition: 'bottom',
        loopBottom: false,
        loopTop: true,
        loopHorizontal: false,
        autoScrolling: true,
        scrollOverflow: false,
        css3: false,
        paddingTop: '3em',
        paddingBottom: '10px',
        normalScrollElements: '#element1, .element2',
        keyboardScrolling: true,
        touchSensitivity: 5,
        continuousVertical: false,
        animateAnchor: true,
        //events
        onLeave: function (index, direction) {},
        afterLoad: function (anchorLink, index) {},
        afterRender: function () {},
        afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {},
        onSlideLeave: function (anchorLink, index, slideIndex, direction) {}
    });
});

$(function () {
    var menu_ul = $('.menu > li > ul'),
        menu_a = $('.menu > li > a');
    menu_ul.hide();
    menu_a.click(function (e) {
        e.preventDefault();
        if (!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('slow');
            $(this).addClass('active').next().stop(true, true).slideDown('slow');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true, true).slideUp('slow');
        }
    });
});

<div class="section" id="section0">
    <!-- SECTION HOME PAGE -->
    <h1>earth. home. destroyed.</h1>
    <div id="content">
        <ul class="menu">
            <li class="item0"><a href="#section0">home page</a></li>
            <li class="item1"><a>releases</a>
                <ul>
                    <li class="subitem"><a>discography</a></li>
                    <li class="subitem"><a>videos</a></li>
                    <li class="subitem"><a>remixes</a></li>
                </ul>

            <li class="item2"><a href="#section1">subscribe</a></li>
            <li class="item3"><a>follow</a>
                <ul>
                    <li class="subitem"><a target="_blank" href="http://www.facebook.com/">facebook</a></li>
                    <li class="subitem"><a target="_blank" href="http://www.twitter.com/">twitter</a></li>
                </ul>
            </li>
            <li class="item4"><a href="#section2">contact</a></li>
        </ul>
    </div>
</div>

Answer 1

因为您在锚点单击事件中使用了 event.preventDefault()，这将限制页面重定向。删除那个，

menu_a.click(function (e) {
    if (!$(this).hasClass('active')) {
        menu_a.removeClass('active');
        menu_ul.filter(':visible').slideUp('slow');
        $(this).addClass('active').next().stop(true, true).slideDown('slow');
    } else {
        $(this).removeClass('active');
        $(this).next().stop(true, true).slideUp('slow');
    }
});

Answer 2

问题是您没有在 fullpage.js 插件中使用锚点。 您可能已经删除了该行。

你需要这样的东西：

$.fn.fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

您不应该使用您发布的初始化。这只是一个示例，显示了带有所有可能选项的 on the documentation（除了您删除的 anchors 和 slidesColor）。

仅使用您需要的选项，并考虑每个选项的默认值，详细信息 at the documentation。 如果您根本不打算使用padding，那么使用paddingTop: '3em', 之类的东西是没有意义的。