Page loads 2 times to be correct

gestx
(@gestx)

1 year ago

Hi,

First of all, congratulations on your work!

Whatever the settings, I always come up with the same problem: the offset is not respected when the page and animation are loaded and the page reloads a second time just to get it right …

I enter my URL…./#my-id and the page and animation load without respecting the 100px offset (because of a fixed menu).
I then move the mouse over the page and the page reloads by itself from the top and the animation works again exactly like I wanted it to.

So the page loads twice, the first time without respecting the offset and the second time perfectly just respecting the offset.

What can I fix in the plugin or in my template?

Many thanks

Fabrice

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)

1 year ago

Hello,

What happens when you temporarily deactivate “Page scroll to id” plugin? Can you test and see if another script scrolls the page?

Also, diasable “Use element’s custom offset (if it exists) when scrolling from/to different pages” option in plugin settings.

Let me know

Thread Starter gestx
(@gestx)

1 year ago

Hello,

Thank you very much for your reply.

In my tests, the option ‘Use element’s custom offset (if it exists) when scrolling from/to different pages’ is already deactivated.

You have to understand that the page only reloads a second time when I move the mouse in the browser. So the page is displayed as it would be without the plugin, then when I move the mouse a second display (of the plugin) takes me exactly where I need to go.

When I deactivate the Page scroll to id plugin, the URL leads directly to the ID I need, but obviously without taking into account the 100px offset because the plugin is deactivated. I’m not quite sure what I’m looking for because I think a URL like…/#anID is interpreted natively in the browser by default (or am I wrong?). In any case, the page only loads once with the plugin disabled, and the scroll stops where it should but without the 100px offset.

So I can’t tell you if I have another script that runs to scroll the page.
I’ve had a look at several installed plugins but haven’t found any options relating to scrolling …
How can I find a script that does the scrolling?

During my tests, I was careful to delete the cache and purge the CSS before changing each option.

Sorry I can’t do more at the moment, but you must be right, there is an initial display with a scroll before the display with the plugin.

Thanks

Plugin Author malihu
(@malihu)

1 year ago

You’re welcome 🙂

Indeed, a URL like #anID is interpreted natively in the browser (by default) but it doesn’t scroll smoothly to the target (it just “jumps” to the target). Does it scroll smoothly to the target when the plugin is deactivated?

I think there’s a script that does what “Page scroll to id” is doing, but of course without the offset etc. I believe the script is ...themes/Divi/js/scripts.min.js and it conflicts with the plugin as they try to do the same thing (scrolling the page smoothly to the target).

Can you check if there’s a way or an option to disable smooth scrolling in the DIVI theme?

Thread Starter gestx
(@gestx)

1 year ago

Hi,

You’re right, the firt scroll is smooth to the target when your plugin is desactivated.
So there must be another script that takes over and performs the first scroll.

I use DIVI and there’s a ‘smooth scroll’ option that can be disabled, so I’ve disabled it. You can also do it via CSS. But that’s not enough, I think that the DIVI script continues to manage the scroll unless it’s ‘smooth’, quite simply.

After a few searches on the internet I couldn’t find anything about the DIVI script that handles scrolling. I also think that the script you mention is a script minified by my cache management and that it is therefore not the original script that can be modified. However, I found the script ‘/wp-content/themes/Divi/js/smoothscroll.js’ and excluded it from the minification.

I then added ‘/wp-content/themes/Divi/js/smoothscroll.js’ to your plugin, under Advanced options -> Prevent other scripts from handling plugin’s links selector(s).

Is this the correct syntax? Is the path correct?

My tests show that with this syntax it doesn’t work, there are always 2 scroll events, the first by DIVI and the second (correct, with the offset) by your plugin.

Thanks for your help.

Plugin Author malihu
(@malihu)

1 year ago

I see. The syntax is not correct for “Prevent other scripts from handling plugin’s links selector(s)”. In this field you add an element selector, e.g. .menu-item a[href*='#']:not([href='#'])

I can’t test your page now as I get a js console error (not sure if you changed anything else?).

Is there a change that the smooth scrolling comes for your “Table of Contents Plus” plugin?

Thread Starter gestx
(@gestx)

1 year ago

A big thank you for trying to find what doesn’t work.

I have deactivated the Table de Content plugin suspected of being a problem, but after refreshing the caches it doesn’t work.

I’m running out of ideas now…

Plugin Author malihu
(@malihu)

1 year ago

I’m still getting the js console error. Can you reactivate/revert everything as before so we can examine/test it further?

Thread Starter gestx
(@gestx)

1 year ago

The “Table of Contents Plus” plugin has been disabled, the only change I did.

I saw the js error but don’t know why.
With the ‘?nowprocket’ in the URL you can load the page without cache.

https://www.reponse-beaute.ch/boutique/?nowprocket#ateliers-maquillage

Does it help you ?

Plugin Author malihu
(@malihu)

1 year ago

Yes it does. Is it possible to contact DIVI devs to ask them if they have such functionality (smooth scroll to target on page load) and how to disable it?

Also, is it posiible for you to edit the ...themes/Divi/js/scripts.min.js file and do some tests, like comment a section of the code and test it?

Thread Starter gestx
(@gestx)

1 year ago

Hi Malihu,

Of course I can edit the files for testing, no problem.

Plugin Author malihu
(@malihu)

1 year ago

OK, can you temporarily deactivate “Page scroll to id” so I can check the other functions?

Thread Starter gestx
(@gestx)

1 year ago

done … Thank you.
Plugin Author malihu
(@malihu)

1 year ago
OK. I don’t know if the themes/Divi/js/scripts.min.js script you’ll edit is minified or not, so I’ll give you both lines. If you edit directly scripts.min.js, find and change the code:
```
et_pb_smooth_scroll(a,!1,o,"swing"),setTimeout((function(){et_pb_smooth_scroll(a,!1,150,"linear")}),o+25)
```
to:
```
/* et_pb_smooth_scroll(a,!1,o,"swing"),setTimeout((function(){et_pb_smooth_scroll(a,!1,150,"linear")}),o+25) */
```
just copy/paste exactly the code above.

If scripts.js is not minified, the code to comment-out should be something like this:
```
et_pb_smooth_scroll(a, !1, o, "swing"),
                            setTimeout((function() {
                                et_pb_smooth_scroll(a, !1, 150, "linear")
                            }
                            ), o + 25)
```
which you should change it like this:
```
/* et_pb_smooth_scroll(a, !1, o, "swing"),
                            setTimeout((function() {
                                et_pb_smooth_scroll(a, !1, 150, "linear")
                            }
                            ), o + 25) */
```
When done, save the file and re-test the URL:
https://www.reponse-beaute.ch/boutique/?nowprocket#ateliers-maquillage
If everything goes well and it doesn’t scroll to the target, reactivate the plugin and test it.
Thread Starter gestx
(@gestx)

1 year ago
Hi,

I commented the line as you suggested. The expected effect is ok: the Divi script doesn’t load BUT something strange is happening and you should be able to help me.

The page / anchor you can test :
https://www.reponse-beaute.ch/boutique#ateliers-maquillage

When I refresh the page the page is displayed completely and the position is TOP. All I have to do is move the mouse and the automatic scroll starts …

Is this a behaviour that can perhaps be adjusted with the parameters of your module?

Thank you very much for your help!
- This reply was modified 1 year ago by gestx.
Plugin Author malihu
(@malihu)

1 year ago

I think there might be something with the cache(?) Cause when I test https://www.reponse-beaute.ch/boutique/?nowprocket#ateliers-maquillage the move mouse issue doesn’t happen at all.

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Page loads 2 times to be correct’ is closed to new replies.