From 7bfdea4214989ed4fb8884cddbcc0dc832979605 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Thu, 2 Jun 2022 12:40:00 +0000
Subject: [PATCH] [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 | 24 +++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 88653d0263b..fd3c1aaf557 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/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
      */