Merge pull request #106 from telerik/scroll-bug-from-top

fix: Incorrect scroll offset on initial page load and when starting from the top

Author: imtodor

_assets/js/api-toc.js

@@ -13,7 +13,7 @@ $(function () {
     if (!!initialHash) {
         setTimeout(function(){
           animateScrolling(initialHash);
-        }, 100);
+        }, 200);
     }
 
     $("#markdown-toc")

_assets/js/toc-base.js

@@ -1,7 +1,20 @@
 function animateScrolling(hash) {
+    var isApiSection = $("article.api-reference").length == 1;
+    var breadCrumbsElement = $("p.breadcrumbs");
+    var hasBreadCrumbs = breadCrumbsElement.length == 1 && breadCrumbsElement.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

_assets/js/toc.js

@@ -58,7 +58,7 @@ $(function() {
     if (!!initialHash) {
         setTimeout(function(){
           animateScrolling(initialHash);
-        }, 100);
+        }, 200);
     }
 
     // animated scroll

_assets/js/top-menu.js

@@ -1,6 +1,8 @@
-var HEADER_HEIGHT = 100;
+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);