hotspot anchor link no smooth scroll

Hey Munford,
I believe that we were working on the page at the same time, as it changed. Nonetheless, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function hotspot_smooth_scroll() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.av-image-hotspot .avia-tooltip .inner_tooltip a[href^="#"]').forEach(function(anchor) {
    anchor.addEventListener('click', function(e) {
      // Prevent default jump
      e.preventDefault();
      const targetID = this.getAttribute('href').substring(1);
      const targetElement = document.getElementById(targetID);

      if (targetElement) {
        targetElement.scrollIntoView({
          behavior: 'smooth'
        });

        // Optionally update URL hash
        history.pushState(null, null, '#' + targetID);
      }
    });
  });
});
</script>
  <?php
}
add_action( 'wp_footer', 'hotspot_smooth_scroll', 99 );

Best regards,
Mike

Hi,
PS, Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
They smooth scroll when I check?
Please keep each thread to one topic, feel free to open multiple threads.

Best regards,
Mike

Hi,

We adjusted the scroll position a bit.

const offsetPosition = elementPosition + 142;

Please try it again:

function av_hotspot_smooth_scroll() { ?>
  <script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.av-image-hotspot .avia-tooltip .inner_tooltip a[href^="#"]').forEach(function(anchor) {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();

        const targetID = this.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetID);

        if (targetElement) {
          const elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
          const offsetPosition = elementPosition + 142;

          window.scrollTo({
            top: offsetPosition,
            behavior: 'smooth'
          });

          history.pushState(null, null, '#' + targetID);
        }
      });
    });
  });
  </script>
<?php
}
add_action( 'wp_footer', 'av_hotspot_smooth_scroll', 99 );

Adjust the value 142 as needed.

Best regards,
Ismael

Hi,

Please looks for this line:

document.querySelectorAll('.av-image-hotspot .avia-tooltip .inner_tooltip a[href^="#"]').forEach(function(anchor) {

Replace it with:

document.querySelectorAll('.av-image-hotspot .avia-tooltip .inner_tooltip a[href^="#"], .av-image-hotspot .av-image-hotspot_inner').forEach(function(anchor) {

Let us know the result.

Best regards,
Ismael