fix: Incorrect scroll offset in the docs API section and inner pages …

…with breadcrumbs
telerik · Jul 13, 2020 · dfcc6be · dfcc6be
1 parent b302937
commit dfcc6be
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/_assets/js/toc-base.js b/_assets/js/toc-base.js
@@ -1,7 +1,19 @@
 function animateScrolling(hash) {
+    var isApiSection = $("article.api-reference").length == 1;
+    var hasBreadCrumbs = $("p.breadcrumbs").length == 1 && $("p.breadcrumbs").text().trim() != "";
     var currentScrollTop = $(window).scrollTop();
     var offset = $(hash).offset() || { top: currentScrollTop };
-    var scrollOffsetCorrection = currentScrollTop == 0 ? HEADER_HEIGHT + NAVBAR_HEIGHT : NAVBAR_HEIGHT;
+
+    var scrollOffsetCorrection = NAVBAR_HEIGHT;
+    if (currentScrollTop == 0) {
+      scrollOffsetCorrection += HEADER_HEIGHT;
+      if (hasBreadCrumbs) {
+        scrollOffsetCorrection += BREADCRUMBS_HEIGHT;
+      }
+      if (isApiSection) {
+        scrollOffsetCorrection += API_SCROLL_FIX;
+      }
+    }
 
     $('html, body').animate({
         scrollTop: offset.top - scrollOffsetCorrection

diff --git a/_assets/js/top-menu.js b/_assets/js/top-menu.js
@@ -1,6 +1,8 @@
 var HEADER_HEIGHT = 81;
 var TELERIKBAR_HEIGHT = 70;
 var NAVBAR_HEIGHT = 76;
+var BREADCRUMBS_HEIGHT = 20;
+var API_SCROLL_FIX = 40;
 var SCROLLSPY_OFFSET = TELERIKBAR_HEIGHT + 10; // 10 compensates for the space above the anchored heading
 var FOOTER_DISTANCE = 20;
 var windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);