As you know, when “scroll to” is done, the page is smoothly moved to the desired selector. But in the following two scenarios, this does not happen, the page is quickly moved to the desired selector. In fact, it no longer behaves smoothly.
If you change the page in the above Rrl, the problem is quite obvious.
This bug occurs in the following two scenarios :
1- Query loop and pagination should be on the archive page.
2- If the query loop and pagination are on the page and the disable header and footer options are enabled.
Imagine each div have individual JS “scroll to” action to be executed when AJAX End, the page will not smooth.
Instead, you should just set the Scroll To interaction on the parent or #brxe-nirrlq section.
The opacity can also be tweaked to only apply on the loop wrapper instead of each div. If you want to apply the class on each div, just target them by using CSS selector which is better in performance.
Please try that. And I will mark this as “NO BUG” because Bricks just follow what you have set currently. Hope this explanation makes sense.
Thank you for your excellent and detailed explanation.
I originally had only one interaction(opacity effect) on the looping, which with your advice, I have now modified it and changed the structure a bit.
But “scroll to” interactions were set on the pagination element from the beginning. And also the main container selector (#brxe-nirrlq) was selected as the target. Please see the screenshot below.
When you set to External CSS method, and at the same time, you have zero global CSS class on that page, the html {scroll-behavior: smooth} will not apply.
Recorded this bug.
For the time being, add html {scroll-behavior: smooth} custom CSS as a workaround.
We’ve fixed this issue in Bricks 1.10, now available as a one-click update in your WordPress Dashboard.
You can see the full changelog here: Bricks 1.10 Changelog – Bricks
Please let us know if you are still experiencing issues.
