The anchor is no longer functioning

Having just started with Javascript, I am facing some issues on my website... I have implemented the fullPage.js script along with another script for a vertical menu containing hidden submenus. However, the script for the navigation menu is not functioning properly in conjunction with fullPage.js. While it looks great, the anchors are no longer working as expected.

I believe there might be an error in my implementation, but I am unable to pinpoint where that mistake lies.

$(document).ready(function () {
    $.fn.fullpage({
        // Various fullPage.js options and configurations here

$(function () {
    // Script for handling the nav menu behavior when clicked

<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>
javascriptjqueryhtmlcssfullpage.js

Answer №1

To fix the issue of your page not redirecting, make sure to remove the event.preventDefault() from your anchor click event function.

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

The issue lies in your usage of anchors within the fullpage.js plugin. It's possible that you accidentally removed a crucial line.

To rectify this problem, consider including:

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

Avoid using unnecessary initialization code as seen in your post. Refer to the documentation link for proper guidance on available options (excluding the anchors and slidesColor which you seem to have omitted).

Select only the essential options based on your requirements, considering the default values outlined in the documentation. Including parameters like paddingTop: '3em', without utilizing padding serves no purpose.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to refactor this jQuery code without duplicating it?

I have a design with three layers, where two are initially hidden using CSS. My goal is to toggle the visibility of these layers based on which input field the user is focused on: The three layers I am working with are: #titleBox, #phoneBox, #addressBox, ...

jquery

Seeking to achieve perfect vertical alignment of two columns within zurb foundation

I'm currently working with Zurb Foundation alongside Sass Compass, though this issue can extend to any CSS framework. Here's an example of the code I have: <div class="row"> <div class="small-6 column">...</div> <di ...

htmlcsssassvertical-alignmentzurb-foundation

Is it possible to use .jCarouselLite with multiple divs under the same name?

$("#gal-row").jCarouselLite({ vertical: false, hoverPause:false, visible: 5, auto:null, speed:1000, btnPrev:"#btn-next", btnNext:"#btn-prev", scroll: 5, circular:false }); I am lo ...

jqueryjcarousel

Tips for identifying and swapping values/parameters in a URL during redirect

To provide more clarity on my inquiry, I will outline the details below: There are three links: Link A, Link B, and Link C Link A: {c_val} Link B: {id} Link C: In the database, there is a value adgaf7g6adf6gadfg8a86fgs9f6g The main focus here is when ...

javascriptjavaphparrays

Using Ajax to monitor an XML file every 5 seconds and refresh the data

I am currently using JavaScript to showcase XML data on an HTML page: $(document).ready(function () { $.ajax({ type: "GET", url: "xml/odds.xml", cache: false, dataType: "xml", success: function(xml) { ...

jqueryajaxxml

Struggling to retrieve JSON response through Javascript

It seems there may be an issue with the API URL or headers in the code provided below. The isError function is always triggered, indicating a lack of response. However, testing the same API URL in Postman returns a successful response. Code: //loading Fl ...

javascriptajax

Getting inaccurate results by entering numbers

const [shipping, setShipping] = useState({ overseas: '3' }) const handleChange = (e) => { setShipping({ overseas: e.target.value }) //can change to 8 or 3 } const selection = shipping.overseas console.log(sel ...

javascript

A guide on utilizing MongoDB command line tools in the railway environment

A current MERN stack project I am working on involves resetting two documents in my MongoDB database to default data at midnight every day to revert changes made on the live website. I achieve this by using the MongoDB CLI database tools to import .json fi ...

javascriptnode.jsmongodbmernrailway

What is the best way to highlight matching words from a list in a Django form's textarea using JavaScript?

I am working with the following form: class TestForm(Form): testfield = CharField(widget=Textarea(attrs={'rows': 10, 'id': 'test'}), label='Input test text here') Displayed in my template along with this context ...

javascriptpythonhtmldjangodjango-templates

"Seeking clarification on submitting forms using JQuery - a straightforward query

My goal is to trigger a form submission when the page reloads. Here's what I have so far: $('form').submit(function() { $(window).unbind("beforeunload"); }); $(window).bind("beforeunload", function() { $('#disconnectform&apo ...

javascriptjquery

Using NextJS to pass a parameter to an onClick function

I've been using the react-simple-star-rating package in this sample code. However, I'm facing an issue: Within my trains parameter, there is a variable id that I would like to pass to the handleRating function using onClick, but I can't see ...

javascriptreactjsparametersnext.jspackage

Please provide me with the coordinates (latitude and longitude) for that address

I am looking to integrate the Google geocoder into my website. I want to be able to input any location address and receive the latitude and longitude coordinates for that location. Are there any helpful tutorials available? For reference, I found a simila ...

phpjavascript

The absence of CSV may be attributed to a reference error

I'm new to all of this, so I believe it's a simple mistake on my end, but I can't seem to get it to work. After deploying the code below and clicking on the button, nothing happens. When I inspect the html in my browser, I see an error mess ...

javascripthtmljsoncsvgoogle-apps-script

Generate table rows by automatically summing the rows and column data using a loop

I'm currently working on a form that dynamically adds data to columns and rows. While I've successfully generated the column names based on database data and used a loop to add details, adding rows has proved to be quite challenging :) Is ther ...

javascriptjqueryhtmladdition

Using Angular 8.x for routing with customized outlet names

I am attempting to set up routing in my Angular 8.x application, utilizing lazy loading and named outlets. Here is the current configuration: main-layout.html <header> <app-top-menu></app-top-menu> </header> <mat-sidenav-cont ...

javascriptangularangular-router

Can you increase all px measurements in Notepad++ by a factor of X?

Looking for help with a large HTML image map that contains over 3000 lines of images with specific top/left pixel positions. I'd like to replace these images with larger ones, which would require increasing all the pixel references by a certain amount ...

javascripthtmlreplacenotepad++

Tips for wrapping text around an image using Bootstrap 5

I am having trouble getting my text to wrap around an image using the Bootstrap 5 grid system. I've attempted to use 'float: right' on the image, but it hasn't produced the desired result. The text should flow naturally around the imag ...

htmlcssbootstrap-5

having difficulty sending the username and password from the HTML page to the controller in AngularJS

In my AngularJS controller, I am having trouble retrieving the values of the username and password fields after submitting the login form. Here is the HTML code for the form: <form class="form-signin" action="" method="post"> ...

javascriptangularjs

The Jquery.ajax function is passing null values to the controller, but it functions properly when using pre-defined

I have been working on a simple app in VS Code where I need to save values into a database. This is the code snippet I have written so far. var name = $("#TextName").val(); var price = $("#TextPrice").val(); var descrip ...

c#jqueryajaxasp.net-mvcasp.net-ajax

Proper method for updating a component prop in Vue.js from within its method

Here is the code snippet for a Vue.js component: var list = Vue.component('list', { props: ['items', 'headertext', 'placeholder'], template: ` <div class="col s6"> <div class="search"> ...

javascriptvue.jsvuejs2vue-component