Scroll to anchor in URL not working on mobile

[kovinet]

I have a landing page and a pretty big subpage built with fullPage.js, with links from landing page leading to certain sections / slides of subpage using anchors like #section2/slide4

While this works on desktop and on iPad (sometimes it doesn't on tablet) it doesn't work on phone, just the first section is opened.
It seems this depends on timing, if it takes too long to render a page it then wont scroll to the linked section. It worked for some time and now in most cases it just won't. I have tested many times and I can't get it to scroll on load time (when page is loaded).

If I then, after the page is loaded, add the anchor to the url again,it does scroll, but with the link from external site beahviour is very unpredictable.

const fp = new fullpage('#fullpage', {
            licenseKey: '',
            continuousHorizontalKey: '',
            continuousHorizontal: true,
            scrollHorizontally: false,
            lazyLoading: true,
            credits: {
                enabled: false
            },
            controlArrows: true,
            controlArrowsHTML: [
                '<div class="las la-angle-left"></div>',
                '<div class="las la-angle-right"></div>'
            ]
        });

[kovinet]

Additionally I have noticed that events like afterLoad and afterSlideLoad and not fired consistently on mobile too. I had some loading div covering the content to hide the jerky motion of scrolling deep to content and then hide the div when events are firesd.

While this worked on desktop, on iPhone the loading div would never get removed since afterLoad is never fired. 😞

[alvarotrigo]

Try to see if you experience the same issue if you use lazy loading for the images:
https://alvarotrigo.com/fullPage/docs/#:~:text=cards%20option.-,lazyLoading,-%3A%20(default

Replace the src attribute for data-src for all images and elements.

If you still do, try removing all images and see if it works.

If you still do, try removing half the sections or a big number of them.

If you still do, try removing scrollHorizontally.

If you still do, try replacing fullpage.extensions.min.js for fullpage.min.js

If you still do, try using animateAnchor: false.

Let's see if we can isolate the issue :)

[JHG-media]

I have the same issue for my page. When opening the URL on mobile with an anchor, first section opens and replaces the previous anchor. Will do as suggested and post results. Since i am not using lazy load by fullpage JS (i combined fullpage JS with swiper where i use lazy loading), I am not sure it is directly related to lazy loading.
Since i had the same idea with the "preloader" as @kovinet and afterLoad wasnt working so well on mobile (it did not fire constantly, so sometimes the overlay was not removed) , i replaced it with afterRender, what suits my needs as well...

fullpage JS init options:

autoScrolling:true,
scrollHorizontally: false,
scrollingSpeed: 300,
lazyLoading: false,
loopTop: true,
loopBottom: true,
touchSensitivity: 10,
navigation: true,

[alvarotrigo]

The scroll to anchor will only start once all the page is fully loaded.
If you have a lot of images or slow-loading elements, those can delay the scroll to anchor.

[JHG-media]

The described behaviour is not working for me on mobile. Page fully loaded, no scroll started.
If you have an android phone or if you emulate android 11 via firefox, you can check for urself: ex-link
This is linked to the second section. It always works for desktop. I have really slow connection here, still does not matter for desktop. But it's broken on mobile or emulated mobile for the first load.

Tell me if you checked, i will remove the link then.

[kovinet]

I can confirm that I have the same issue as @JHG-media. I also noticed that afterLoad event never fires on mobile, so this could be related. But demo at https://alvarotrigo.com/fullPage/#page2 works fine ...

I have all images lazy loaded but it doesn't help.

[alvarotrigo]

That's weird, I cannot reproduce the issue on the callbacks demo:
https://github.com/alvarotrigo/fullPage.js/blob/master/examples/callbacks.html

I used Safari, Chrome, and Firefox. All working fine.

Can you try running it on your phones and see if you get any of the problems you mention?

• Scroll to anchor not working
• afterLoad callback not firing.

Here's a video of the demo running on a real device on Browserstack.com:

anchor-scroll.mp4

[alvarotrigo]

If you have an android phone or if you emulate android 11 via firefox, you can check for urself: https://modxtest.jhg-media.de/evolution/work-duplizieren.html#just-a-project1

Can you try to isolate the issue from any possible external code that might be interfering with fullpage.js?
If you can reduce the code to the minimum with only a heading per section and no external CSS or JS files then we can discard any third-party conflicts and start investigating the issue.

[JHG-media]

I will narrow it down further, but no time today. At the weekend i will try to give you detailed information.

[alvarotrigo]

At the weekend i will try to give you detailed information.

Awesome! Thanks! 👍