[FIX] website, *: make scroll to anchor consider the fixed header

*: website_blog

This was fixed and rebroken quite a few times. Hopefully, with this
commit and the next ones, the feature will be more robust: when clicking
on a link anchor, the animation now considers the fixed header height if
any *even if the header becomes fixed during the animation*.

Part of https://github.com/odoo/odoo/pull/57975
task-2344227

1 files changed, 22 insertions, 6 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 2840bc1e7e3..81640cde197 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -899,12 +899,28 @@ registry.anchorSlide = publicWidget.Widget.extend({
      * @param {jQuery} $el the element to scroll to.
      * @param {string} [scrollValue='true'] scroll value
      */
-    _scrollTo: function ($el, scrollValue = 'true') {
-        const headerHeight = this._computeHeaderHeight();
-        const offset = $el.css('position') !== 'fixed' ? $el.offset().top : $el.position().top;
-        $('html, body').animate({
-            scrollTop: offset - headerHeight,
-        }, scrollValue === 'true' ? 500 : 0);
+    _scrollTo: function ($el, scrollValue = 'true', forcedDelay = undefined) {
+        const _computeScrollTo = () => {
+            const headerHeight = this._computeHeaderHeight();
+            const offset = $el.css('position') !== 'fixed' ? $el.offset().top : $el.position().top;
+            return offset - headerHeight;
+        };
+        const originalScrollTo = _computeScrollTo();
+        return new Promise(resolve => {
+            $('html, body').animate({
+                scrollTop: originalScrollTo,
+            }, {
+                duration: forcedDelay || (scrollValue === 'true' ? 500 : 0),
+                progress: (a, b, remainingMs) => {
+                    const scrollTo = _computeScrollTo();
+                    if (Math.abs(scrollTo - originalScrollTo) >= 1.0) {
+                        $('html, body').stop();
+                        this._scrollTo($el, scrollValue, remainingMs).then(() => resolve());
+                    }
+                },
+                complete: () => resolve(),
+            });
+        });
     },
     /**
      * @private