Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 26, 2025 at 9:16 am #1489591
    DianaLoola73

    Hello Enfold Support,

    I am experiencing a problem with the combination of anchor links and section animations on my website.
    When I use the main navigation to jump to an anchor link, for example here:
    https://store-project.com/#steinbacher
    the page scrolls too far down, so that the linked element is not directly visible. In my case, the section is animated upwards, and it seems that the browser does not take this movement into account when calculating the scroll position. As a result, the page always lands a bit too far down.

    Without the animation, the anchor jump works correctly. With the animation enabled, this behavior occurs.
    Is there a way to combine both – keeping the nice animation and still landing at the correct position when using anchor links?

    Thank you very much in advance for your support.

    Best regards,
    Diana

    September 29, 2025 at 6:56 am #1489637
    Ismael

    Hey Diana,

    Thank you for the inquiry.

    We tried logging in, but the credentials above are incorrect. Please try adding this script to the functions.php file to adjust the scroll position on hash change.

    add_action('wp_footer', function () {
    ?>
    <script>
      window.addEventListener('hashchange', function () {
        setTimeout(function () {
          const hash = window.location.hash;
          if (!hash) return;

          const target = document.querySelector(hash);
          if (!target) return;

          const elementPosition = target.getBoundingClientRect().top + window.pageYOffset;
          const offset = 100;

          window.scrollTo({
            top: elementPosition - offset,
            behavior: 'smooth'
          });
        }, 300);
      });
    </script>
    <?php
, 9999);

    Best regards,
    Ismael

    October 3, 2025 at 8:59 am #1489801
    DianaLoola73

    Hi Ismael,

    thank you for your suggestion. Unfortunately, I cannot use this solution, because any changes to the parent theme’s functions.php would be overwritten with the next update. After completion, the site will be handed over to the client (THI), who are only end users and cannot re-apply such modifications.

    So the only solution will now be to simply remove the anchor links to the moving sections/boxes.
    Nevertheless, thank you very much for providing the solution.
    Best regards,
    Diana

    October 6, 2025 at 7:21 am #1489878
    Ismael

    Hi,

    Thank you for the update.

    If a child theme is not activated, you can add the code using a plugin like Code Snippets or a similar tool to make sure the modification is preserved during updates. Still, it’s recommended to install a child theme. Let us know how it goes.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.