This code snippet can be really helpful, if your builder/them does not have a way to wrap elements with needed div for ScrollSmoother to work. Code runs right before DOM content is loaded, but yet not rendered. Also, by using "motionpage_before_scripts" filter, this code will run before any motion.page scripts.
1. First thing you will need is a "functions.php" file (in case of themes and builders based on theme) or any code execution plugin (Code Snippets, Scripts Organizer, WPCodeBox, AdvancedScripts, ...) or custom functionality plugin.
2. A PHP snippet can be set to run only on the frontend. It has two parameters, where the first one is an empty string and the second one is an ID of current post (if we are on actual post and not on any other page like search, archive and similar).
3. The JavaScript function __wrapWithScrollSmoother takes 3 parameters.
First parameter is the parent element, which can contain elements like header,main and footer and this is the element, where we will put our wrapper element.
Second parameter is an array of elements that we want to wrap with #smooth-content div. The order of elements in the array will be the same order that they will be inside the #smooth-content div.
Third parameter will either "prepend" or "append" #smooth-wrapper div inside the element that you stated in the first parameter. You will use "append", if you need to put an element at the end of a parent element. If you leave this parameter as optional, elements will "prepend" and they will be put at the top of all child elements.
In the example below, we will target pages 8 and 38 with a fictional Elementor code and page 122 with a Bricks code.
In the example below, the code will run on every page (don't forget to set it to run only on frontend). As we don't need $post_id parameter, we are not passing arguments (thus 0 at the end of the function).
The last example, we can target homepage, search and post/page with and ID 22.
You can find all three examples in the link below:
And on this link, you can find unminified JavaScript functions that you can find in the $main string:
Don't forget to set CSS for both #smooth-wrapper and #smooth-content as width: 100%.
In the second part, I will show you how to extract elements with ease with JavaScript.