Page scroll to id
Code examples & short tutorials
Using offsets
You can offset the scroll-to position via the offset
option parameter and/or via the data-ps2id-offset
html attribute.
offset
option parameter provides a general offset for all the links handled by the plugin. For example, setting offset value to 50 will stop page scrolling 50 pixels before reaching the target
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:50 });
data-ps2id-offset
attribute provides link specific offsets. The data attribute overwrites the offset
option and is useful when you need to set a different offset for a link
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a>
When the link above is clicked, it will stop page scrolling 100 pixels before reaching the target.
The offset value can be a positive or negative number, a string representing an element selector, a js or jquery object, a function or an array of values.
Integer
Offsets scroll-to position by x amount of pixels (positive or negative number). Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:50 });
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset="100">link</a>
$.mPageScroll2id("scrollTo","#id",{ offset:-50 });
String
Offsets scroll-to position by element height/width/position. Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:"#id" });
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset=".class-name">link</a>
js/jquery object
Offsets scroll-to position by element height/width/position. Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:document.getElementById("id") });
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:$("#id") });
Function
Offsets scroll-to position via function. Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:function(){ return offsetFn(); } }); function offsetFn(){ var myOffsetY=50, myOffsetX=100; return [myOffsetY,myOffsetX]; }
Array
Offsets vertical (y) and horizontal (x) scroll-to positions separately. Examples:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:{"y":"50","x":"100"} });
<a href="#id" rel="m_PageScroll2id" data-ps2id-offset='{"y":"#id","x":"0"}'>link</a>
$("a[rel='m_PageScroll2id']").mPageScroll2id({ offset:{"y":document.getElementsByTagName("nav") || "ul.nav","x":"0"} });
User defined callbacks
You can trigger your own js function(s) by calling them inside onStart
and onComplete
option parameters. For example:
$("a[rel='m_PageScroll2id']").mPageScroll2id({ onStart:function(){ myCustomFn1(); }, onComplete:function(){ myCustomFn2(); } }); function myCustomFn1(){ console.log(mPS2id.target.attr("id")); } function myCustomFn2(){ console.log(mPS2id.scrollTo.y); }
Returning values
The script returns the following values and objects
mPS2id.trigger
– the event which triggered page scrolling. Returned values: “selector” (click), “scrollTo” (method)mPS2id.clicked
– the element that was clicked as jQuery objectmPS2id.target
– the target element as jQuery objectmPS2id.scrollTo.y
– the vertical scroll-to position (pixels)mPS2id.scrollTo.x
– the horizontal scroll-to position (pixels)
Using Page scroll to id with deep linking plugins
There are many solutions for deep linking via javascript. The archive contains examples of using Page scroll to id with jquery.address and jquery-hashchange.
Normally, you’ll use plugin’s scrollTo method to trigger page scroll in hash-change events. If you need to disable the click events of selectors, set clickEvents
to false
$("a[rel='m_PageScroll2id']").mPageScroll2id({ clickEvents:false }); $(window).hashchange(function(){ var loc=window.location, to=loc.hash.split("/")[1] || "#top"; $.mPageScroll2id("scrollTo",to,{ clicked:$("a[href='"+loc+"'],a[href='"+loc.hash+"']") }); });
Dynamic content
When adding links and/or sections to your page dynamically (e.g. via ajax, js click events etc.) you may need to re-call mPageScroll2id function after your new content is fully loaded: $.mPageScroll2id();
This ensures the script will highlight your newly added links and targets correctly. If you don’t use plugin’s highlight feature, you can skip mPageScroll2id function call.
Links highlighting
The plugin highlights links automatically. When the page is scrolled (by clicking a link, mouse-wheel, touch-swipe etc.), the script checks if a target element is within the viewport and adds a highlight class (default: mPS2id-highlight
) to the corresponding link(s).
You can change the default highlight class to your own, through the highlightClass
option parameter
$("a[rel='m_PageScroll2id']").mPageScroll2id({ highlightClass:"highlighted-menu-item" });
By default, all links handled by the plugin are eligible for highlighting. Normally, you’d want to highlight only certain links such as those in navigation menus and not others like back-to-top. This can be achieved either by styling only the CSS selector you want, for example:
.menu a.mPS2id-highlight{ background: #ff0; }
or by inserting the selectors subset in the highlightSelector
option parameter
$("a[rel='m_PageScroll2id']").mPageScroll2id({ highlightSelector:".menu a" });
The plugin also provides a way of manually setting the highlight positions of each target element. If you need to set a specific area (in pixels) at which the highlight class is added, use the option parameter target_
followed by the number of your target within your document
$("a[rel='m_PageScroll2id']").mPageScroll2id({ target_1:{ from:0, to:-799 }, target_2:{ from:-800, to:-1599 }, target_3:{ from:-1600, to:-2399 } });
The target_
option gets the values { from, to, fromX, toX }
When multiple targets are within the viewport, more than one links will be highlighted simultaneously. If you don’t want this behavior, set forceSingleHighlight
option parameter to true
$("a[rel='m_PageScroll2id']").mPageScroll2id({ forceSingleHighlight:true });
Alternatively, you can target the first and last highlighted elements by using the classes .mPS2id-highlight-first
and .mPS2id-highlight-last
.
Plugin home Project on GitHub
Hello,
I just wanted to let you know, that your Plugin is not compatible with the newest version of the DIVI Theme. The Frontend Divi Builder is not loading when the plugin is active. Since Divi is quite popular I thought this would be interesting to you.
Thanks for this plugin!
greetings from Munich
Hello,
Can you please post the “Selector(s)” option value you have in plugin settings?
Also, does plugin version 1.6.8 work (as opposed to the latest 1.6.9)?
Thanks!
I can confirm that the latest WordPress (5.5.1), latest DIVI theme (4.6.6) and “Page scroll to id” plugin (1.6.9) all work as expected.
Please check in “Page scroll to id” settings and set the “Selector(s)” option value to:
a[href*='#']:not([href='#'])
Normally, you should also see a warning under the “Selector(s)” option.
Save changes and test. Let me know.
I am using the jquery version of the plugin and I have a problem with the animation after loading the page when the link comes from another subpage. I do not know how to enable the option so that when I click on the menu link, it will switch me to another subpage and scroll me nicely after loading.
My code:
(function($){ $(window).on("load",function(){ /* Page Scroll to id fn call */ $(".subpage__nav a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id({ highlightSelector:".subpage__nav a", highlightClass:"active", scrollEasing: "easeInOutExpo", offset: 40 }); }); })(jQuery);
Someone help?
The jQuery plugin does not support this feature out-of-the-box (e.g. via option). You’ll need to add the following script in your page(s), after
jquery.malihu.PageScroll2id.js
inclusion:<script> (function($){ //scroll to hash on page load _hash=location.hash || null; $(function(){ var href=window.location.href.replace(/#.*$/,"#"); $(window).scrollTop(0); if(window.history && window.history.replaceState){ window.history.replaceState("","",href); }else{ window.location.href=href; } }); $(window).on("load",function(){ $(window).scrollTop(0); var scrollToHashUseElementData=true, linkMatchesHash=$("a._mPS2id-h[href$='"+_hash+"'][data-ps2id-offset]:not([data-ps2id-offset=''])").last(); setTimeout(function(){ if(scrollToHashUseElementData==="true" && linkMatchesHash.length){ linkMatchesHash.trigger("click.mPS2id"); }else{ $.mPageScroll2id("scrollTo",_hash); } if(window.location.href.indexOf("#")!==-1){ if(window.history && window.history.replaceState){ window.history.replaceState("","",_hash); }else{ window.location.hash=_hash; } } },60); }); //----- })(jQuery); </script>
Thank you! This work 🙂
Hi there!
Is there a way to change the target scrollable element? I mean, the default element is body or document, I´m not sure. What if I need to set some different elemento do watch for scroll event?
Hello,
It’s not possible (at least for now). See this FAQ:
http://manos.malihu.gr/page-scroll-to-id/3/#faq-1
Hi,
Hope you are doing good. Can you please let me know how you have created/used plugin for the menu you have used in the demo? That section1, section2.. demo. I love that menu and wana use it in the middle of my page before some sections but unable to find how to make exact same menu/buttons. Can you help please? otherwise no issues at all 🙂
I would like to ask a question, when I click on a link in the navigation, and then scroll the page, and the link just clicked has a class “mPS2id-clicked” that has not been removed, how can I fix this bug?
Hi,
This is not a bug, it’s a feature. The last clicked link gets the class
mPS2id-clicked
, all links within the viewport get the classmPS2id-highlight
etc. Why would you want to remove it?Thank you!
So, I implemented this with WP Bakery Page Builder
But it’s working on the tabs as well, even when I used your selectors mentioned in the article. http://manos.malihu.gr/using-page-scroll-to-id-with-wpbakery-page-builder/
To view this issue:
Head over to nonfig.com and click on SIMPLE TO USE
Head over to https://www.keydesign-themes.com/intact/digital-product/ and click on ADVANCED STATISTICS
You will notice the behavior.
let me know how to solve this.
Hello,
I checked your pages and “Page scroll to id” plugin is not activated/used. Let me know when you activate it.
Yeah, I had to deactivate it because of the above-mentioned issue.
Please check now.
Go to “Page scroll to id” settings and add:
, .tab > a
at the end of the “selectors are excluded” field. Just copy the value above and paste it at the end, right after
a.screen-reader-text.skip-link
Click save changes, test your page and let me know
Hi,
I’m a beginner trying to use your plugin with elementor on page load. I inserted an html code in a section at the top of the page with this code:
<script> jQuery(window).on("load",function(){ jQuery.mPageScroll2id("scrollTo","#productbox"); </script>
I have an anchor labeled “productbox”
i was hoping the page would scroll onload.
any idea what I’m doing wrong?
Thanks!
Ainatte
Hello,
It depends where you placed the code. In WordPress, you should place the code in your theme/child-theme footer.php, just before the closing body tag (
</body>
).Also, the code you posted doesn’t seem correct(?) Change the code to:
<script> (function($){ $(window).on("load",function(){ $.mPageScroll2id("scrollTo","#productbox"); }); })(jQuery); </script>
Let me know if it works
Great Plugin, it worked really well until a couple of days ago. Meanwhile I get the following meassage in my WB theme when your plugin is activated.
Deprecated: contextual_help is deprecated since version 3.3.0! Use get_current_screen()->add_help_tab(), get_current_screen()->remove_help_tab() instead. in /var/www/myeloma-registry.com/wp-includes/functions.php on line 5088
Could you please give me some advice how I can handle this error message.
Best regards
Gerhard
Hi,
This message is a simple notice. It’s not an error and it does not affect plugin’s functionality or performance in any way (you see this message because you have enabled debug constant in wp-config.php).
This said, the deprecated message will be fixed in plugin’s next version (you can get it now in plugin’s development if you want).
The message appears on admin pages (not on the frontend), right?
When you say “it worked really well until a couple of days ago” you mean it doesn’t work now or you’re just talking about the backend message?
Hi there Manos
Thanks again for answering my last queries – really helpful.
I was wondering if it is possible somehow to use the highlight option on a link to another page rather than an intrapage link?
I have a fixed ul in the sidebar of a page -the page contains a number of thumbnail illustrations. What I would like is for the relevant li to highlight as its corresponding illustration scrolls into view. But as I say, the link in the list is to another page, not to the illustration.
I hope that makes sense and thanks for your help.
James
I can’t really say unless I see your page. If your thumbnails are actual links maybe but I have no idea without seeing your page and code.
Hi – sorry- yes, meant to add a link…
http://kesselldesign.co.uk/wip/CJG_dev_5/work
I see. No, you can’t really do this.
You’d need to develop a completely custom script for such behavior.
Ok – I thought that might be the case – but I really appreciate you taking a look – thank you.
All best wishes,
James
Is it possible for the page to auto-scroll to an id a few seconds after page load?
You’ll need to add a custom js script in your page that will use plugin’s scrollTo method.
For example:
<script> (function($){ $(window).on("load",function(){ setTimeout(function(){ $.mPageScroll2id("scrollTo","#your-id"); }, 4000); }); })(jQuery); </script>
Thanks – that works great. How can I incorporate an offset into that?
See plugin method on the link I posted above. You use the offset option parameter:
<script> (function($){ $(window).on("load",function(){ setTimeout(function(){ $.mPageScroll2id("scrollTo","#your-id",{ offset: 100 }); }, 4000); }); })(jQuery); </script>
Thank you – I should have worked that out. 🙂
i’m using your wonderful plugin since 2016. Recently I saw, that the plugin isn’t working anymore on my site. I can’t say for how long. It’s the newest version running on WordPress 5.2.4.
Its a german website. You have to follow these menus items to get there. “Angebot” then “Preise”. Now you see the menu on the right.
Regardless which item you click the page will scroll to the top instead to the id.
Hello,
Your HTML code has the following error:
It has a js script (as well as 2 empty lines) before the
<!doctype html>
tag. I don’t know why or how this script got in your template but it’s invalid.If you remove it, everything will work. Let me know 🙂
Thank you very much!
That code was incorrect. It should force a iframe to reload, but indeed it’s faulty.
Thanks!
Hello,
I wanted to ask, if there is some trick when visiting page from url demo-all-options.html#section-7 to have smooth scrool till section-7 rather then goes direct there without any anumation?
Thanks in advance. All best.
Hello,
Can you elaborate a bit more on what you need? Can you give an example?
Hello, i have a question about callbacks, could You provide me an example of adding class to body when for example second section is loaded/active ?
How can i target specific section ?
I suppose it should be something like this:
onComplete:function(){ if(mPS2id.target === 1){ $("body").addClass('test'); } }
Thank you very much in advance.
What im trying to achieve is that body class is changing with sections, so when section is active body class will have class name same as id of active section.
Something like this should work:
onComplete:function(){ var currentID = mPS2id.target.attr("id"), //get current section id classToAdd, //class(es) to add variable classToRemove; //class(es) to remove variable //set the class according to current section id switch(currentID) { //change "my-id-1", "my-id-2" etc. to your section classes case "my-id-1": //if current section id is my-id-1 classToAdd = "my-id-1"; //then add the class my-id-1 to the body classToRemove = "my-id-2 my-id-3 my-id-4"; //and remove the other non-current sections classes break; case "my-id-2": classToAdd = "my-id-2"; classToRemove = "my-id-1 my-id-3 my-id-4"; break; case "my-id-3": classToAdd = "my-id-3"; classToRemove = "my-id-1 my-id-2 my-id-4"; break; case "my-id-4": classToAdd = "my-id-4"; classToRemove = "my-id-1 my-id-2 my-id-3"; break; } //add/remove class(es) to body $("body").removeClass(classToRemove).addClass(classToAdd); }
Let me know if it helps
EDIT: Added the missing
break
I’ve added break’s to other cases and it works like a charm.
Thank You for Your help.
Ah yes, I missed this!
First and foremost thank you for this wonderful plugin.
For the links to work for the hamburger menu links on a one-page site, I cannot use ‘#link’ but must use a full path ‘https://beatballaballa.com/beta-phase/#link’.
But that ruins the smooth scrolling effect.
Here’s what happens:
The page loads ‘https://beatballaballa.com/#presse’
then hops back to the top of the page:
‘https://beatballaballa.com/#’, after which it loads:
‘https://beatballaballa.com/#presse’
Is there something I can do to get the instant scrolling effect back that I get with ‘#presse’.
Thank you either way for your great plugin and help,
Mark
Hello,
I responded to your request in the support forum:
https://wordpress.org/support/topic/double-load-with-full-path-link/#post-12095693
You should remove the
beta-phase
part from your links URL (there’s no beta-phase page in your site).Thank you Manos,
I followed your advice, see response to your post
https://wordpress.org/support/topic/double-load-with-full-path-link/#post-12095693
Thank you much, Mark
Hi!
Thanks for your amazing plugin.
Sometimes the “Scroll from/to different pages (i.e. scroll to target when page loads)” works, and sometimes not.
It’s hppaning in the same website:
Working – https://chizki.com/%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D/#s8
Not working – https://chizki.com/solutions/#s8
I’d glad to know what should I do to fix it. I want it to work in all pages.
Thanks!
Hello,
On the
https://chizki.com/%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D
page, thes8
target element exists and that’s why it works.On the
https://chizki.com/solutions/
page, there’s nos8
target element, so it doesn’t work.These are different pages, so you need to also add the
s8
id on the/solutions/
page.Let me know
Thanks, you were right.
But what about here?
https://levi-david.com/%D7%94%D7%A9%D7%99%D7%A8%D7%95%D7%AA%D7%99%D7%9D-%D7%A9%D7%9C%D7%A0%D7%95/#s4
Here all the sections have a different ID, and yet it didn’t scroll to them when loading the page
No problem.
In the page you posted there are few elementor links with custom actions that conflict with the plugin.
Try this:
Go to “Page scroll to id” settings and add the following at the end of the selectors are excluded field (just copy/paste the code below including the comma and space at the beginning):
, #elementor-action
Save changes and test your page.
Thanks a lot, you’re great, but it didn’t work:
http://prntscr.com/pv03ia
Any idea please?
Ah sorry, I posted the wrong selector! Change it to this:
, a[href*='#elementor-action']
Save changes and test. Let me know if it worked 🙂
Thanks! You’re great.
now it’s opening the page at the right section, but it’s not scrolling down to it.
I’d love to get a fix for it, but it’s not urgent, take your time.
Thanks again!
You have an error in the selectors are excluded field. There are 2 commas there. Change the value at the end from:
, , a[href*='#elementor-action']
to:
, a[href*='#elementor-action']
Hello Malihu!
Thank you for developing Page scroll to 2id plugin, it’s great to use it.
My question:
I have installed JinvertScroll script on WordPress website for a horizontal scrolling and also installed Page scroll to 2id plugin with a “Prevent other scripts from handling plugin’s links” and “auto” orientation adjustments but now i have a problem with scrolling to my Page scroll to 2id sectors: after clicking the button the screen moves only for a very little to the right but not to the Page scroll to 2id sector that i need and adjusted. PS: when i deleted JinvertScroll script all began work as normal but the page became as a vertical but not a horizontal orientation. I read some your answers here so maybe the problem with CSS. Also i implemented your script with only mouse wheel scrolling effect but the situation was the same: screen only moved to one direction to the right but not back by mouse wheel.
Can you give a useful advices what to do? Thank you in advance!
Hello,
I need to see your page/site in order to help with such issues.
That said, “Page scroll to id” does not convert a page’s template design from vertical to horizontal (and vice versa). By using the horizontal or auto layout in plugin settings, you simply instruct the plugin the direction it should scroll (but your page should already have a horizontal design/layout).
Also, the plugin does not scroll overflowed divs. It works strictly on document’s root element (html/body).
I’m not sure if any of the above is the issue. If you can post your page/site URL, I’ll be able to check it and help if I can.
If i will post the link can you hide it from others?
You can send me an email here:
https://manos.malihu.gr/contact
This is really valuable information and very practical to get done.
Is there any resource for the new updates as well?
Thank you!
Hi,
I’m using the scroll to id and custom scrollbar plugin. It works well, but I can’t find out how I can set the highlightClass on scroll and on click
I have your mCustomScrollBar and m_PageScroll2id plugins installed on a page that jumps to IDs like this:
<a href="#bkmk11" class="web_address" style="text-decoration: none" rel"m_PageScroll2id">How does this work?</a><br>
that jumps to IDs like this:
<div class="h1_info" id="bkmk11"><b>How does this work</b></div><br>
But when it gets there, the scrollbar disappears. If I try to scroll with the mouse wheel, the cursor jumps back to the top and the scrollbar reappears.
You show a callback that will return the scrollTo.y property but that only returns the position; it doesn’t allow me to mouse from there.
function myCustomFn2(){ console.log(mPS2id.scrollTo.y);}
I need to update the mouse position but your code doesn’t show how to do that. I really hope you can help with this. Both plugins are great!
I am going to credit you on my website when it goes live in two weeks. The site has a very innovative design. PLEASE HELP.
Thanks,
Mark
The 2 plugins are not compatible. They don’t work together as “Page scroll to id” works only with browser’s native scrollbar.
Javascript scrollbars (like mCustomScrollBar) have their own methods for scrolling the page. You can see the method here and a related guide here.
Is there any way/mechanism to attach the ps2id scroll settings to a non tag e.g. – div.iamclickable
I’m using it in WordPress Divi theme and I’ve set a #link on a hover_enabled et_clickable et_pb_row
The plugin works strictly on anchor elements (i.e. links) with a valid href/URL attribute.
The only way to do it on a div, would be via javascript, e.g. by using plugin’s scrollTo method to scroll to the target element when the div is clicked. For this you’d need to add a custom js script in your template.
Navigation blocked
Hello,
I have several sites that use your plugin.
I just noticed that since this morning, your plugin has been blocking my sites:
– links/menus no longer work
– my browser tells me: “A web page slows down your browser. What do you want to do?”
We can no longer browse the sites and they are therefore inaccessible.
I disabled the plugin, the problem is solved but of course the “scroll” function no longer works.
Do you know what the problem is.
I have the latest updates of wordpress and my plugins.
Thank you.
Sorry about my English, I’m French.
Thank you.
Please see my reply here:
https://wordpress.org/support/topic/navigation-blocked/#post-11583781
Hi,
with the plugin update I got an issue
with version 1.6.5
link with href like http://www.xxxxxx.com/page/#id are no longer underlined, while they were with 1.6.4
link with href like #id are still underlined, as they were with 1.6.4
This sounds like a css issue. If you post your site url, I’ll be able to check what happens and help.
Hi
this is the page that does not work anymore with 1.6.5
http://www.gianesing.com/it/azienda/
It seems you’re using the “Q2W3 Fixed Widget” plugin, right?
Did you update the Q2W3 plugin too or change its settings?
Please check the following thread and see if changing the Q2W3 plugin options mentioned, fixes the issue:
https://wordpress.org/support/topic/conflict-with-q2w3-fixed-widget-1/
Hi,
I have Q2W3 5.1.9, the latest available.
The thread is about Q2W3 not working, in my case is page-scroll-to-id that does not work as expected. Any case I tried to do what suggested in thread, but it doen not work.
Hello again,
I think the issue you’re having might be related to an issue in version 1.6.5.
I’ve pushed a fix for this issue in plugin’s development version:
https://downloads.wordpress.org/plugin/page-scroll-to-id.zip
Please replace version 1.6.5 with the one above and check if the issue is fixed.
Let me know
Hi,
i’m test your plugin for this website, but I have a problem. When I click the link in menu once, it scrolls to the anchor but it work only at the first time. The menu-link is deactivated after clicking.
I changed in the settings “Allow only one highlighted element at a time”, “Keep the current element highlighted until the next one comes into view” and “Highlight by next target2 on and off but this has no effect for my problem. I use the WPBakery Plugin.
Thanks for your help.
Hello,
The problem you have does not come from “Page scroll to id”. It comes from your theme’s internal function for scrolling the page. The 2 scripts that do this are:
...themes/suffice-pro/assets/js/smooth-scroll.min.js
...themes/suffice-pro/assets/js/suffice-custom.min.js
Try this:
Go to “Page scroll to id” settings and enable/check “Prevent other scripts from handling plugin’s links” option. Save changes and test your page.
If this doesn’t work, you’ll need to see if there’s an option in your theme settings to disable page smooth scrolling for same-page links.
Let me know
Hello,
i try check “Prevent other scripts…” and deactivate the “back to top”-function in theme but the problem is the same.
Thanks for your reply.
In plugin settings, enable “Append the clicked link’s hash value to browser’s URL/address bar” option. Save changes and test again.
Hello,
that’s is the Solution. After checking this option i can jump between the anchors.
Thanks for your help.
Hi,
After updating to Page scroll to id version 1.6.5 it scrolls too fast, and doesn’t stop the scrolling were it should stop it.
This page illustrates the problem:
https://silent.se/psy/overklighet
Click on for example [1] and you see what happens.
Hi,
Did you installed another plugin, e.g. auto-optimize?
Thanks for your reply. Yes, at the same time as updating Page scroll to id I updated Autoptimize, WP Rocket and WordPress.
Can you flush/clear your site cache (wp rocket)?
I have deleted the cache of Autoptimize and flushed the cache of WP Rocket. The problem remains.