Anchor Link doesn t work

Hey Diana,
Thank you for the link to your site and the screenshots, some of them didn’t work, so as I understand this text link on your homepage is not landing correctly for you:

it is meant to land on a empty color section:

when I test it lands correctly, the blue in this screenshot is your empty color section:

I tested with Windows in Chrome & Edge and Mac in Safari & Chrome, and all worked correctly, only Firefox on both Windows & Mac didn’t work correctly, I’m not sure why firefox is having an issue, but to try to adjust for the firefox error I added this code to your functions.php:

function custom_smooth_scroll_to_id_for_firefox_script() { ?>
  <script>
function slowScrollToAnchor() {
  var urlHash = window.location.hash;

  if (urlHash) {
    var target = document.querySelector(urlHash);
    if (target) {
      var targetPosition = target.offsetTop;
      var startPosition = window.pageYOffset;
      var distance = targetPosition - startPosition;
      var duration = 1000;
      var startTime = null;

      function scrollAnimation(currentTime) {
        if (startTime === null) startTime = currentTime;

        var timeElapsed = currentTime - startTime;
        var scrollY = easeInOutQuad(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, scrollY);

        if (timeElapsed < duration) {
          requestAnimationFrame(scrollAnimation);
        }
      }
      function easeInOutQuad(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      }

      requestAnimationFrame(scrollAnimation);
    }
  }
}

window.addEventListener('load', slowScrollToAnchor);
</script>
  <?php
}
add_action('wp_footer', 'custom_smooth_scroll_to_id_for_firefox_script', 99);

and after clearing your site cacke and my browser caches for all of my test browsers the anchor link is now correct, even in Firefox. Most of my tests landed correctly even on firefox, but in one case on firefox the script scrolled the page backwards to land in the land place. So the script shows to correct the issue.
If you want to adjust the one second delay you can change var duration = 1000; to a higher or lower number 1000 equals one second, it seem to work good just the way it is.

BTW – your Header Footer Code Manager plugin don’t seem to allow PHP snippets, so if you are not going to use a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets.

Best regards,
Mike

Hi,

Thanks for helping out @guenni007 :-)

Best regards,
Rikard

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike