Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 4, 2026 at 12:07 pm #1495729
    Bernd

    Hi,

    We’re using a fixed header on mobile. Also with more height because of an integrated widget. The problem is, if you jump to an anchor on mobile, the anchor and the following headline are hidden behind the fixed header.

    Is there a way to adapt the anchor links on mobile?

    I tried the solution from the thread https://kriesi.at/support/topic/anchor-links-do-not-work-properly-only-on-mobile/ with a js in functions.php. But this results in a JS error:
    Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

    Regards,
    Bernd

    March 4, 2026 at 2:45 pm #1495737
    Rikard

    Hey Bernd,

    I added the code in question on a test site, but I’m not seeing any errors after. Are you sure that you copied the whole script?

    Best regards,
    Rikard

    March 4, 2026 at 3:03 pm #1495738
    Bernd

    Yes, I copied the whole script. I also temporarily disabled caching and JS compression, but the error still occurs.

    Regards,
    Bernd

    • This reply was modified 3 weeks, 3 days ago by Bernd.
    March 4, 2026 at 6:26 pm #1495743
    Rikard

    Hi,

    If you provide us with WordPress login details then we can add it for you.

    Best regards,
    Rikard

    March 5, 2026 at 8:46 am #1495763
    Bernd

    Hi Rikard,

    Thanks. The script was copied in functions.php of the child theme, line 84.

    Regards,
    Bernd

    March 5, 2026 at 1:48 pm #1495779
    Rikard

    Hi,

    Thanks for that. I’ve added the code for you, please check your site.

    Best regards,
    Rikard

    March 5, 2026 at 2:04 pm #1495781
    Bernd

    Hi,

    The only difference I see, is, you moved the code from the end to the beginning of the functions.php. The error still occurs:
    Uncaught Error: Syntax error, unrecognized expression: a[href*=#]:not([href=#])

    And on mobile devices using Safari, the anchor with the H2 still disappears under the fixed header.

    Regards,
    Bernd

    March 5, 2026 at 5:53 pm #1495787
    Rikard

    Hi,

    Where exactly are you seeing that error?

    Best regards,
    Rikard

    March 6, 2026 at 8:40 am #1495811
    Bernd

    Hi Rikard,

    Browser dev tools > Console

    Regards,
    Bernd

    March 7, 2026 at 2:14 pm #1495835
    Mike

    Hi,
    The issue is that newer versions of jQuery (1.9+) no longer support the old CSS selector syntax using bare # characters. We need to escape them properly. This is the updated code that I added to your site, I also changed the offset to match your header height.

    function slow_scroll_to_anchor() { ?>
  <script>
(function($) {
  $('a[href*="#"]:not([href="#"])').click(function() {
    var width = $(window).width()
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        if ($(window).width() < 768) {
          $('html,body').animate({
            scrollTop: target.offset().top - 150
          }, 1000);
          return false;
        } else {
          $('html,body').animate({
            scrollTop: target.offset().top - 250
          }, 1000);
          return false;
        }
      } 
    }
  });

  // Executed on page load with URL containing an anchor tag.
  var hash = location.href.split("#")[1];
  if (hash) {
    var target = $('#' + hash);
    if (target.length) {
      if ($(window).width() < 768) {
        $('html,body').animate({
          scrollTop: target.offset().top - 150
        }, 1000);
      } else {
        $('html,body').animate({
          scrollTop: target.offset().top - 250
        }, 1000);
      }
    }
  }
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'slow_scroll_to_anchor', 99 );

    Please clear your cache and check.

    Best regards,
    Mike

    March 9, 2026 at 2:03 pm #1495886
    Bernd

    Hi Mike,

    Awesome support, thanks a lot! It works fine :-)
    You can close this topic.

    Regards,
    Bernd

    March 9, 2026 at 8:20 pm #1495897
    Rikard

    Hi,

    Great, I’m glad that Mike could help you out. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Adapted anchor links on mobile because of fixed header’ is closed to new replies.