locomotive scroll click go to div position jquery

To achieve this using jQuery, you can use the animate() method to smoothly scroll to the desired position of the div element when the scroll click event is triggered on the locomotive scroll.

Here's an example:

HTML:

<div style="height: 1000px;"></div>
<button class="scroll-click">Scroll to Div</button>
<div id="scroll-target" style="height: 500px; margin-top: 500px; background-color: #ccc;"></div>
<div style="height: 1000px;"></div>

JavaScript (jQuery):

$(document).ready(function() {
  // Initialize locomotive scroll
  const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
  });

  // Scroll click event handler
  $('.scroll-click').on('click', function() {
    const targetTop = $('#scroll-target').offset().top;

    $('html, body').animate({
      scrollTop: targetTop
    }, 1000);
  });
});

In this example, the scroll-click class is added to the scroll click button. When this button is clicked, it triggers the click event handler function. Inside the function, the offset().top method is used to get the top position of the scroll-target div element. Then, the animate() method is used to smoothly scroll the page to that position over a duration of 1000 milliseconds (1 second).

Note: Make sure you have included the jQuery library and the Locomotive Scroll library in your project for this to work