Anchor doesn't work anymore

Question

I'm a beginner with Javascript and I've some issues with my website... I'm using fullPage.js script and another script for a vertical menu with hidden submenu. My script for nav menu is not working with fullPage.js. Looks great but my anchors don't work anymore.

I'm probably doing a mistake somewhere but I can't find where.

$(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

The problem is that you are not using anchors in your fullpage.js plugin. You might have deleted the line.

You will need something like:

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

You shouldn't be using the initialization that you posted. That's just an example showed on the documentation with all the possible options (except the anchors and slidesColor that your removed).

Use only the options you need taking into consideration the default values of each of them which are detailed at the documentation. It doesn't make sense to have things like paddingTop: '3em', if you are not going to use padding at all.

Answer 2

because you are using event.preventDefault() in your anchor click event which will restrict the page from redirecting. Remove that one,

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