Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1430100

    Hi Mike
    I have one more problem regarding the same site, and it only happens on mobile, on the computer the links work fine.

    I built the main menu and the content of the pages with anchor links.
    Each page 1, 2, 3, 4, 5 has a different number of topics with anchors for each topic,
    Only if you go through the main menu to the last topic on another page, you don’t get to the right place.
    But if you are on a certain page, no matter what topic on the page, click on the last topic on that page, you will get to it properly.

    pages index on the image
    https://eliya-tal-geva.co.il/wp-content/uploads/2024/01/index-pages.png

    link to page 1A

    link to page 2A

    link to page 3A

    Attached is a link to the first example video – going through the menu works fine,
    Are on page 1A and click on the last subject on the same page 1F, you reach the right place.
    https://eliya-tal-geva.co.il/wp-content/uploads/2024/01/First-example-from-1A-to-1F-and-from-2A-to-2E.mp4

    Attached is a link to a second example video – going through the menu is incorrect,
    From page 2A click through the main menu on topic 1F, you don’t get to the right place on the page.
    https://eliya-tal-geva.co.il/wp-content/uploads/2024/01/Second-example.mp4

    I hope I managed to explain myself
    Thank you
    Yossi

    #1431411

    Hey Yossi,
    Thank you for your patience, I have tried reviewing your videos and pages on desktop and mobile and as I understand, on mobile the last menu item 1F from the homepage, or other pages falls short, and from what I can see the same issue is occuring with the last item on other pages. This seems to only be with the last items and only from other pages.
    Is this correct?
    I believe this is because when you are on the correct page all of the images and elements are loaded so clicking the last menu item lands correctly,
    but from other pages going to the last menu item of a different page, the images are lazy loading changing the height of the page after load causing the issue.
    Are you using a lazy load plugin or a caching pluging with lazy loading?
    It looks like the images also are using the theme animation when they are in view, which will be different for mobile that desktop.

    If you are using lazy loading please try to disable this to see if it helps, so we can determine if this is indeed the issue.
    I think we can use some javascript to force the page to fully load and then scroll to the sections, but it will help if we had admin access to test.
    Is this site live? Would you prefer us to test on a staging site?
    If so please include an admin login in the Private Content area with a link to the staging site so we can test, or we can test on this site if you wish.

    Best regards,
    Mike

    #1431451

    Hi Mike

    I created a username for you on the site
    The site is up and running – it’s okay to work on it

    I tried to disable the lazy loading and it created a bigger lag for moving between the pages, so I turned it back on.

    And I had a cache cleaner plugin, I temporarily disabled it,
    I see that there is still only the last link of the same page on mobile, look does not work well.

    Thank you

    #1431506

    Hi,
    Thanks for the login, I added the function in your child theme functions.php and it seems to solve the issue.
    Please ensure that you clear your device cache a couple of times, please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    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 - 10 //offsets for fixed header
            }, 1000);
            return false;
          } else {
          	$('html,body').animate({
              scrollTop: target.offset().top - 80 //offsets for fixed header
            }, 1000);
            return false;
          }
          } 
        }
      });
      //Executed on page load with URL containing an anchor tag.
      if($(location.href.split("#")[1])) {
          var target = $('#'+location.href.split("#")[1]);
          if (target.length) {
          	if ($(window).width() < 768) {
            $('html,body').animate({
              scrollTop: target.offset().top - 10 //offset height of header here too.
            }, 1000);
            return false;
          } else {
          	$('html,body').animate({
              scrollTop: target.offset().top - 80 //offset height of header here too.
            }, 1000);
            return false;
          }
          } 
        }
    }(jQuery));
    </script>
      <?php
    }
    add_action( 'wp_footer', 'slow_scroll_to_anchor', 99 );

    Best regards,
    Mike

    #1433275

    Hi Mike
    Sorry, I didn’t answer this before,
    Your solution is excellent!!

    I appreciate your support,
    The support blog that answers many questions even before I contact you,
    And enjoy working with Enfold

    Thank you very much
    Yossi

    #1433302

    Hi,
    Glad we were able to help, and thank you for the kind feedback, 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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Anchor links do not work properly only on mobile’ is closed to new replies.