Click anchor link – Scroll to Slideshow Section

We usually use Code Block to add an ID, however with Slideshow, Gallery or List, we can’t add a Code Block. We can use these follow steps to do this.

#1. Find Slideshow Section ID.
In my example, it is: section[data-section-id=”67001e5a8430a927e9a0b7c9″]

#2. Edit anchor link > Use this format like this
#brunch-menu (you can use any names, in my example, I do for a restaurant menu so I use this).
and make sure “Open in New Tab” is disabled

#3. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // scroll to section 1
  $('[href="#brunch-menu"]').click(function() {
    $('html, body').animate({
      scrollTop: $('section[data-section-id="66e13805dfe5051a029939b4"]').offset().top
    }, 1000); // Thời gian cuộn là 1000ms (1 giây)
  });
 // scroll to section 2
  $('[href="#dinner-menu"]').click(function() {
    $('html, body').animate({
      scrollTop: $('section[data-section-id="67001e5a8430a927e9a0b7c9"]').offset().top
    }, 1000);
  });
});
</script>