Cali

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 !

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.

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.

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

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.

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 ??

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.

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 ?