[IMP] website: set anchor offset by fixed header height

When you click on an anchor link, this commit ensures that the scroll
is in the correct place if there are fixed menus on the page.

Part of https://github.com/odoo/odoo/pull/40690
task-1894456

2 files changed, 18 insertions, 6 deletions

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 1b6fa07a5c0..0f70408fc47 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -15,7 +15,7 @@ publicWidget.registry.affixMenu = publicWidget.Widget.extend({
         var def = this._super.apply(this, arguments);
 
         var self = this;
-        this.$headerClone = this.$target.clone().addClass('o_header_affix affix').removeClass('o_affix_enabled').removeAttr('id');
+        this.$headerClone = this.$target.clone().addClass('o_header_affix affix o_top_fixed_element').removeClass('o_affix_enabled').removeAttr('id');
         this.$headerClone.insertAfter(this.$target);
         this.$headers = this.$target.add(this.$headerClone);
         this.$dropdowns = this.$headers.find('.dropdown');
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index a4c82cfe2de..e0cf1df3fcd 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -908,11 +908,22 @@ registry.anchorSlide = publicWidget.Widget.extend({
     /**
      * @private
      * @param {jQuery} $el the element to scroll to.
+     * @param {string} [scrollValue='true'] scroll value
      */
-    _scrollTo: function ($el) {
+    _scrollTo: function ($el, scrollValue = 'true') {
+        const headerHeight = this._computeHeaderHeight();
         $('html, body').animate({
-            scrollTop: $el.offset().top,
-        }, 500);
+            scrollTop: $el.offset().top - headerHeight,
+        }, scrollValue === 'true' ? 500 : 0);
+    },
+    /**
+     * @private
+     */
+    _computeHeaderHeight: function () {
+        let headerHeight = 0;
+        const $navbarFixed = $('.o_top_fixed_element');
+        _.each($navbarFixed, el => headerHeight += $(el).outerHeight());
+        return headerHeight;
     },
 
     //--------------------------------------------------------------------------
@@ -931,11 +942,12 @@ registry.anchorSlide = publicWidget.Widget.extend({
             return;
         }
         var $anchor = $(hash);
-        if (!$anchor.length || !$anchor.attr('data-anchor')) {
+        const scrollValue = $anchor.attr('data-anchor');
+        if (!$anchor.length || !scrollValue) {
             return;
         }
         ev.preventDefault();
-        this._scrollTo($anchor);
+        this._scrollTo($anchor, scrollValue);
     },
 });