Support » Plugin: Page scroll to id » Not scrolling to the correct position (divi extra theme)

  • Cali

    (@dirollordi)


    Hello,

    Link from another page is not scrolling to the correct position,

    “Prevent other scripts from handling plugin’s links” option is enabled. I have some custom css that is adjusting margins and padding but I erased the custom css for testing and it does the same. I tried adding delay for scrolling to target on page load but nothing changed. I’m using extra theme from divi so I use ID CSS on a section to make an anchor link.

    The link is on the word “formulaire” on faq page and leads to to the section named “C’EST PARTI !” on the other page.

    Thanks for your help

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author malihu

    (@malihu)

    Hello,

    The problem comes from the images in your page that are loaded only after the page has scrolled to their position (i.e. they are lazy-loaded).

    This means that the position of the #contact target “moves” further down the page, each time an image was loaded <b>while the page was being scrolled</b>.

    Hope this makes sense.

    You’ll need to either disable images lazy-loading or set their placeholder height to be the same as the actual image height when it’s loaded.

    Thread Starter Cali

    (@dirollordi)

    Hey,

    Thank you for your very fast response !

    I have w3 total cache but I already deactivate lazy loading and deactivate the whole plugin too to be sure while I was trying to get scroll to id working, but I just found out that I had smush extension that has lazy load activated ! I deactivate it and deactivate the whole extension but still has the problem but now it gets a little closer to the landing anchor.

    I noticed too that links from the same page aren’t 100% accurate but it is close to accurate so that is maybe because of the menu top bar ?

    I tried deactivate all extensions, and it became same like the link of same page, so one extension is messing things up, by reactivate them one by one I found out that is : Supreme Modules Lite – Divi Theme, Extra Theme and Divi Builder (it adds the before/after effect on images).

    So now how can I fix both problems ?

    Plugin Author malihu

    (@malihu)

    No problem 🙂

    Try this:
    Go to plugin settings and enable “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option.
    Save changes, test and let me know

    Thread Starter Cali

    (@dirollordi)

    I tried the “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option but it doesn’t do anything, I also changed this extension : Supreme Modules Lite – Divi Theme, Extra Theme and Divi Builder and replaced it with this one : before + after image. It seems that it’s working better as it has now only a small offset and on mobile it is perfect, no offset at all, so I guess now it has to do with the menu top bar that changes size while scrolling with a mouse on PC version. I tried adding offset with a pixel number or with selector but it doesn’t work at all. (strange because the offset option was working with the Supreme Modules Lite – Divi Theme, Extra Theme and Divi Builder extension). I feel like something is broken in my theme but can’t find what it is.

    Plugin Author malihu

    (@malihu)

    Ok. The top menu is the issue for the minor difference (77 pixels). Add the following to your CSS:

    @media only screen and (min-width: 1024px){
      .page-container #et-boc{
        transition: transform .5s;
      }
    
      .page-container.et-fixed-header #et-boc{
        transform: translateY(77px);
      }
    }

    This should fix it. Test it and let me know

    Thread Starter Cali

    (@dirollordi)

    I tried the css but it did something to the footer, the footer is overlapped by the page, and in the about page “a propos” the footer moves while scrolling. Maybe it conflicts with some css that I have that removes margins in the footer and in the page ? I took off your code, and today I just realize that the offset is worse than before when clicking on the other page link, I made some changes lastly but I don’t know how I made it worse, I checked if I accidentally activated lazy load but no it is deactivated. Also, on the mobile it doesn’t work anymore, damn 😡

    Plugin Author malihu

    (@malihu)

    Change the CSS to:

    @media only screen and (min-width: 1024px){
      .page-container #et-boc, 
      .page-container #main-content, 
      #footer{
        transition: transform .5s;
      }
    
      .page-container.et-fixed-header #et-boc, 
      .page-container.et-fixed-header #main-content, 
      #footer{
        transform: translateY(77px);
      }
    }

    This will fix the footer issue.

    When I test this CSS everything seems to work as expected (desktop and mobile).

    Let me know

    Thread Starter Cali

    (@dirollordi)

    Hey ! Sorry for the delay answer.

    On chrome it doesn’t work the first time, and then it works every time, on firefox it doesn’t work at all, it isn’t even close to the expected result. Same on mobile for chrome and firefox.
    On the about page the strange floating page is still there on my pc monitor (3840 x 2160 scaled at 150%) but maybe less present (it doesn’t bother much). I’m trying to understand this random behavior, is it because of cache or something ?

    It annoys me to disturb you since I feel that the problem doesn’t come from Page scroll to id extension but more from a theme related issue.

    Plugin Author malihu

    (@malihu)

    No problem 🙂

    Did you add the CSS I posted? I checked your page and the CSS is not applied. Can you check if it’s added or if you need to clear some cache?

    @media only screen and (min-width: 1024px){
      .page-container #et-boc, 
      .page-container #main-content, 
      #footer{
        transition: transform .5s;
      }
    
      .page-container.et-fixed-header #et-boc, 
      .page-container.et-fixed-header #main-content, 
      #footer{
        transform: translateY(77px);
      }
    }
    Thread Starter Cali

    (@dirollordi)

    Yes I added and removed it while I was trying different random stuff and I forgot to let it with the code, I just added it again and leave it like this so you can check it.

    I tried removing my CSS code that I was thinking that maybe is conflicting but nothing changed, I also tried to deactivate again the extensions : nothing. I also tried your css in combination with different options in Page scroll to id like “delay” and “prevent other scripts from handling plugin’s links” with no success.

    Here are some options now, I leave them like that until you check this :

    In general :

    Your CSS is added
    All caches cleared
    Lazy load : off

    In Page scroll to id :

    Selector(s) : a[href*=’#’]:not([href=’#’])
    delay : 0
    offset : 0
    Scroll from/to different pages (i.e. scroll to target when page loads) : checked
    prevent other scripts from handling plugin’s links : checked

    Thread Starter Cali

    (@dirollordi)

    In firefox it firstly jumps to the good position perfectly (very fast, I barely see it, more visible on firefox mobile though) and then jumps back up and then scrolls back down again in a wrong position this time. Maybe it is a clue and can help debugging?

    PS : I just noticed that in Edge it does it to, choppier but very similar.

    Thread Starter Cali

    (@dirollordi)

    One more detail that might help : As I said on chrome the first time (with cleared cookie, history etc) it missed the spot but after it works however on mobile it just goes on the perfect spot but on pc it goes just above the title “c’est parti !” but below the stylish section separator so not 100% accurate.

    Plugin Author malihu

    (@malihu)

    OK. The only thing that is not under our control is the Firefox jumping to the target before scrolling. This is because of how Firefox handles loading different URLs with hashes and there’s nothing really we can do. Keep in mind that we simply cannot have perfect smooth scrolling in all browsers when we go from one URL to another.

    For the other issues:

    You need to use the offset option because your top header (only on desktop) is sticky. Since your theme changes your header height on-the-fly (while the page is scrolling), you’ll need to set the offset as following:

    In plugin settings:

    1)Enable the “Auto-generate #ps2id-dummy-offset element” option.
    2)Set the following value in the “Offset” option field:

    #ps2id-dummy-offset

    Save changes.

    In your CSS, add the following:

    #ps2id-dummy-offset{
      height: 0;
    }
    @media only screen and (min-width: 1024px){
      #ps2id-dummy-offset{
        height: 96px;
      }
    }

    FYI: 96 pixels is the height of your sticky header.

    Go to plugin settings again and add the following delay in “delay for scrolling to target on page load” field:

    500

    Save changes and test your page in Chrome and Firefox.

    If the delay we added doesn’t fix the wrong position in Firefox, enable “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option in plugin settings.

    Let me know 🙂

    Thread Starter Cali

    (@dirollordi)

    Ok I have some good news ! This corrected the offset I had perfectly !

    I removed the previous code because it “breaks” a little bit of the theme as I said it makes the about page kind of floating and the stick header when rolling back to the top we see the background when it changes height, the footer too :

    @media only screen and (min-width: 1024px){
      .page-container #et-boc, 
      .page-container #main-content, 
      #footer{
        transition: transform .5s;
      }
    
      .page-container.et-fixed-header #et-boc, 
      .page-container.et-fixed-header #main-content, 
      #footer{
        transform: translateY(77px);
      }
    }

    So without this code it is good but then the offset was again not accurate, so I changed in your last code the height instead of 96px I put 173px :

    #ps2id-dummy-offset{
      height: 0;
    }
    @media only screen and (min-width: 1024px){
      #ps2id-dummy-offset{
        height: 173px;
      }
    }

    I put 173px because I found this by inspecting page in chrome : <div id="main-header-wrapper" style="height: 173px;">

    It seems to work fine now, what do you think ?

    Now for the bad or strange news ! The problem that it wasn’t working on the first launch of the page (with cleared cookie, history etc) has been corrected on PC ! However, on my mobile it is still there, on the first time it misses completely the target and then it works every single time. But here is the strange thing : I tried on another mobile and it works right away on the first time, I cleared everything it works, I tried on private navigation it works ! The one that isn’t working is a Nokia 8, the one that is working is a Redmi Note 8 pro, both on chrome up to date. That is totally beyond my thought process…

    All what I said here is only for chrome, on Firefox it is a mess, the delay and the “Verify target position and readjust scrolling (if necessary), after scrolling animation is complete” option, unfortunately, didn’t help. Of course, I tried without my modifications exposed above first.

    If there is no way of fixing it in firefox I though maybe we can deactivate the animation only for Firefox (or any other browser except chrome maybe?) so at least the link would get you to the right place.

    Thank you again for all your help !

    Plugin Author malihu

    (@malihu)

    The change in offset you did seems correct 😉

    The thing is that without the CSS, there’s no way to completely fix the scrolling issue. This is because your theme changes the height of the top header and thus the length of the page, while the page is scrolling.

    This means that when the plugin starts scrolling the page to a specific target position, by the time it gets there, the target’s position has changed (because the theme changed the header height without compensating for the difference).

    I hope all this makes sense.

    You can leave the plugin settings as they are now and simply disable “scroll from/to different pages” option.

    This will disable the smooth scrolling between the pages (you’ll have smooth scrolling on same-page links).

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Not scrolling to the correct position (divi extra theme)’ is closed to new replies.