Scroll the menu to the div smoothly without any animation

My onepage website features menu points that smoothly scroll to a specific div upon click. Although the functionality is working correctly, I have added a jQuery function for animation which seems to be malfunctioning.

Below is the HTML code:

  <div class="mainmenu">
        <div class="menuwrapper">
            <div class="menulist">
                <ul class="items">
                    <li class="menuitem">
                        <a href="#home">HOME</a>
                    </li>
                    <li class="menuitem">
                        <a href="#team">TEAM</a>
                    </li>
                    <li class="menuitem">
                        <a href="#leistungen">LEISTUNGEN</a>
                    </li>
                    <li class="menuitem">
                        <a href="#know-how">KNOW-HOW</a>
                    </li>
                    <li class="menuitem">
                        <a href="#contact">KONTAKT</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>

and this is the JavaScript code snippet:

$(document).ready(function(){
$('a').click(function(){
        $('html, body').animate({
            scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
        }, 500, "swing");
        return false;
    });

    $(window).resize(function(){
        sliderResize();
    });
});

If anyone has any insights or suggestions, please feel free to share them!

Answer â„–1

One issue arises when you click on an <a> tag, as it functions like a regular link (in this case, an anchor tag).

To prevent the default link behavior, you must include code to stop it:

$('a').click(function(e){
    e.preventDefault(); // This will halt the automatic anchor jump

    // You can now incorporate your smooth scroll animation

Refer to the preventDefault() documentation for further details.

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

Content must be concealed following the third paragraph

Dealing with an API that generates content in p tags, which can become excessively long. Considered hiding the content after 400 characters, but it poses a risk of cutting through HTML tags. Instead, looking to hide the excess content after 3 paragraphs a ...

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Due to different screen sizes, the image does not appear on top of another image exactly. It seems like a new function is needed. One that does not overlap with another image (by clicking the function for a few seconds), but rather replaces it for those fe ...

What is the best way to perform a redirect in Node.js and Express.js following a user's successful login

As I work on developing an online community application with nodejs/expressjs, one persistent issue is arising when it comes to redirecting users to the correct page after they have successfully signed in. Despite reading several related articles and attem ...

Using JavaScript/jQuery to Set a Timer for Animation with Google Maps Markers

After clicking a marker on a Google map, I've managed to make it bounce with the following code. However, I'm looking for a way to stop the animation after 2 seconds. Is there some kind of timer function that I can incorporate? Here's the ...

Toggle visibility between 2 distinct Angular components

In my application, I have a Parent component that contains two different child components: inquiryForm and inquiryResponse. In certain situations, I need to toggle the visibility of these components based on specific conditions: If a user clicks the subm ...

Modify the div height to match the parent div's height

I'm currently working on customizing a navigation panel, and I'm looking to align the styles of the various options with the parent div. One specific adjustment I need to make is setting the background color of the options to match the parent div ...

How to retrieve a specific component instance in Vue using CKEditor

Using the CKEditor instance, I am looking to utilize the following method: on( 'paste', function( evt )). The Vue CKEditor documentation mentions: If you require access to the editor object, you can use the editor property of the component’s i ...

The HTTP request is malfunctioning in a different location

I'm facing an issue where my code works in the w3schools code editor, but not on localhost or cpanel host. When I try to run it on another host, it gives me a bad request and doesn't return the answer. Here is the code snippet that I am working ...

Tips for vertically aligning table cells within Bootstrap

I am facing an issue with a bootstrap table that contains a form-inline in a specific column, which is causing the contents in other columns to not be vertically centered. (As shown in the 1st code snippet) How can I resolve this problem? If I remove the ...

Utilizing HTML list elements in conjunction with a switch statement, and connecting the list directly to a database for

Hey there, I'm interested in learning how to access HTML elements and use them within switch statements. <div id="hori"> <ul> <li><a href="#">Aerospace</a></li> <li><a href="#">Automotive</a>< ...

Endless cycle of invoking functions in Angular.js

Issue with the template : <div class="container"> <h1>Process Definitions</h1> <table class="table table-stripped" > <tr> <td><strong>Name</strong></td> <td><strong>Id</st ...

What is the best way to send the $_SESSION['var'] array to jquery and initiate an ajax request?

I'm dealing with an issue here. I need to retrieve all the items within the $_SESSION['cart'] array and pass it to jQuery so that it can be used in a php-ajax file. My question is, how can this be accomplished? This is what I have in mind: ...

I'm struggling to achieve the placement of my logo and navigation bar side by side

Check out the codes here body{ margin: 0; } .logo { text-indent: -999999px; background: url('logo3.png'); width: 216px; height: 219px; } .header{ width: 100%; height: auto; background-color: #eef3f5; padd ...

Employing v-btn for navigating to a different route depending on whether a specific condition is satisfied

Is there a way to prevent this button from redirecting to the specified URL? I want to implement a validation check in my method, and if it fails, I need to stop this button from performing any action. Any suggestions or assistance would be highly apprec ...

Expanding the dropdown menu depending on the selection of the radio button

I am looking to implement a feature where the drop-down option is displayed or hidden based on the selection of a radio button in AngularJS. If the "Overall Company" radio button is selected, then the drop-down element should not be shown. If the "Demogra ...

What is the best way to save longitude and latitude coordinates in a database using the <input> method?

Learn how to use HTML code <html> <body> <p>Press the button below to receive your coordinates.</p> <button onclick="getLocation()">Get Coordinates</button> <p id="demo"></p> <script> var x = doc ...

Looking for a way to go through a set of documents in an array and calculate the sum of a specific property in JSON using the $cond

Here's an array of JSON data: let x = [{"Data":"Chocolate","Company":"FiveStar"},{"Data":"Biscuit","Company":"Parle"},{"Data":"Chocolate","Company ...

Modify the Radio component in Material UI to customize the color of the checked

After researching various threads on the topic, I am still unable to modify the default red checked color in material ui. Below is the code snippet in question: return ( <FormControl> <FormLabel>{label}</FormLabel> ...

Change the date from Thu Jan 01 1970 01:00:00 GMT+010 to the format yyyy/mm/dd

Currently, I am developing a web application using Angular which includes a form with a date field that utilizes the angular material datepicker component. Once a user selects a date from the datepicker, the retrieved value is in the format: Thu Jan 01 197 ...

What is the best way to update object property data variables in JavaScript/TypeScript?

I have reorganized the following code to enhance simplicity and reusability. Essentially, my goal is straightforward: I possess a series of empty arrays that are linked to specific keys (which correspond to a set of unique ID's). To populate data int ...