@salesforcedevs/docs-components 1.3.130-alpha.0 → 1.3.130-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.130-alpha.0",
+    "version": "1.3.130-alpha.1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -369,15 +369,52 @@ export default class ContentLayout extends LightningElement {
         let { hash } = window.location;
         if (hash) {
             hash = hash.substr(1);
+
+            const docHeaderEl = document.querySelector(
+                ".sticky-doc-header"
+            ) as HTMLElement;
+            const globalNavEl = document.querySelector(
+                "hgf-c360nav"
+            ) as HTMLElement;
+            const contextNavEl = document.querySelector(
+                "hgf-c360contextnav"
+            ) as HTMLElement;
+
+            const headerHeight =
+                docHeaderEl.offsetHeight +
+                globalNavEl.offsetHeight +
+                contextNavEl.offsetHeight;
+
+            const docPhaseEl = this.template
+                .querySelector("[name=doc-phase]")!
+                .assignedElements()[0] as HTMLSlotElement;
+
+            const offset = docPhaseEl
+                ? headerHeight + docPhaseEl.offsetHeight
+                : headerHeight;
+
             for (const headingElement of headingElements) {
                 if (headingElement.getAttribute("id") === hash) {
-                    headingElement.scrollIntoView({ behavior: "auto" });
+                    this.scrollIntoViewWithOffset(headingElement, offset);
                     break;
                 }
             }
         }
     }
 
+    private scrollIntoViewWithOffset(
+        headingElement: HTMLElement,
+        offset: number
+    ) {
+        window.scrollTo({
+            behavior: "auto",
+            top:
+                headingElement.getBoundingClientRect().top -
+                document.body.getBoundingClientRect().top -
+                offset
+        });
+    }
+
     private calculateActualSection(): void {
         const currentScrollPosition = document.documentElement.scrollTop;
         const id = Object.keys(this.anchoredElements).find(