Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1489591

    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

    #1489637

    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

    #1489801

    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

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