On click menu scroll down page to specific div using jquery

On click menu scroll down page to specific div using jquery

To scroll down the page to a specific <div> element when a menu item is clicked using jQuery, you can use the .click() event handler along with the .animate() method. Here's an example:

HTML:

<nav>
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

<div id="section1">
  <!-- Content of section 1 -->
</div>

<div id="section2">
  <!-- Content of section 2 -->
</div>

<div id="section3">
  <!-- Content of section 3 -->
</div>

JavaScript (jQuery):

$(document).ready(function() {
  // Function to handle menu item click event
  $('nav ul li a').click(function(e) {
    e.preventDefault(); // Prevent the default link behavior

    var target = $(this).attr('href'); // Get the target element ID
    var offset = $(target).offset().top; // Get the target element's offset from the top

    // Scroll smoothly to the target element
    $('html, body').animate({
      scrollTop: offset
    }, 1000); // Adjust the duration as needed
  });
});

In the above code, we first define the click event handler for the menu items using $('nav ul li a').click(). Inside this handler, we prevent the default link behavior by calling e.preventDefault(), which prevents the browser from following the link.

Next, we get the href attribute of the clicked menu item using $(this).attr('href'). This will give us the ID of the target <div> element to scroll to.

We then calculate the offset of the target element from the top of the page using $(target).offset().top.

Finally, we use the .animate() method to smoothly scroll the page to the target element. We animate the scrollTop property of the html and body elements to the calculated offset. You can adjust the duration of the animation (in milliseconds) as needed.

By implementing this code, when a menu item is clicked, the page will scroll down smoothly to the corresponding <div> element specified in the menu item's href attribute.