[FIX] website: scroll correctly when the url contains an anchor

When the url redirects to an anchor on a website page, the page must
scroll correctly to the section. This commit allows to do that by taking
into account the size of the navbar. The bug is visible by following
those steps:
- Drop a text - image block on a page
- Drop a picture block under text - image block
- Create a link to target the picture block
- Put link to block picture in the "Learn more" button
- Save
- Right click on the "Learn more" button and open link in a new tab

=> The page is not scrolled correctly to the picture block.
Note that the bug is not present if the header has scroll, disappear or
fade out as scroll effect.

task-2818629

closes odoo/odoo#92777

Signed-off-by: Vray Benjamin (bvr) <bvr@odoo.com>

addons/website/static/src/js/content/menu.js

@@ -26,6 +26,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
         this.hasScrolled = false;
         this.closeOpenedMenus = false;
         this.scrollHeightTooShort = false;
+        this.scrollableEl = $().getScrollingElement()[0];
     },
     /**
      * @override
@@ -135,6 +136,18 @@ const BaseAnimatedHeader = animations.Animation.extend({
             this.el.classList.remove('o_transitioning');
         }
     },
+    /**
+     * Scrolls to correctly display the section specified in the URL
+     *
+     * @private
+     */
+    _adjustUrlAutoScroll() {
+        // When the url contains #aRandomSection, prevent the navbar to overlap
+        // on the section, for this, we scroll as many px as the navbar height.
+        if (!this.editableMode) {
+            this.scrollableEl.scrollBy(0, -this.el.offsetHeight);
+        }
+    },
     /**
      * @private
      */
@@ -186,7 +199,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
      * @returns {boolean}
      */
     _scrollHeightTooShort() {
-        const scrollEl = $().getScrollingElement()[0];
+        const scrollEl = this.scrollableEl;
         const remainingScroll = (scrollEl.scrollHeight - scrollEl.clientHeight) - this.scrolledPoint;
         const clonedHeader = this.el.cloneNode(true);
         scrollEl.append(clonedHeader);
@@ -213,6 +226,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
             this.hasScrolled = true;
             if (scroll > 0) {
                 this.$el.addClass('o_header_no_transition');
+                this._adjustUrlAutoScroll();
             }
         } else {
             this.$el.removeClass('o_header_no_transition');
@@ -439,6 +453,10 @@ publicWidget.registry.DisappearingHeader = BaseDisappearingHeader.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    _adjustUrlAutoScroll() {},
     /**
      * @override
      */
@@ -462,6 +480,10 @@ publicWidget.registry.FadeOutHeader = BaseDisappearingHeader.extend({
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    _adjustUrlAutoScroll() {},
     /**
      * @override
      */