diff --git a/generator/_assets/js/custom.js b/generator/_assets/js/custom.js
index c4e3a5a0c..c1dfe4c7c 100755
--- a/generator/_assets/js/custom.js
+++ b/generator/_assets/js/custom.js
@@ -388,7 +388,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
                 for (let i = anchorsOffsets.length - 1; i >= 0; i--) {
                     if (scrollTop > anchorsOffsets[i]) {
-                        setActiveLink(anchors[i].id);
+                        setActiveLink(anchors[i].id, i);
                         break;
                     }
                 }
@@ -396,11 +396,16 @@ document.addEventListener("DOMContentLoaded", function () {
 
         }
 
-        const setActiveLink = (id) => {
+        const setActiveLink = (id, n) => {
             const activeLink = document.querySelector(`#TOCbox_list li a[href$="#${id}"]`);
             if (activeLink) {
                 activeLink.classList.add('current');
             }
+            const tocWrapper = document.getElementById('TOCbox_wrapper');
+            const TOC_TOP_OFFSET = 42;
+            const LI_HEIGHT = 30;
+            const selectedOffset = window.innerHeight-TOC_TOP_OFFSET - (LI_HEIGHT * (n + 1))
+            tocWrapper.style.top = (selectedOffset < 0 ? 12 + selectedOffset : 12) + 'px';
         }
 
         window.addEventListener('scroll', updateActiveTocItem);
diff --git a/generator/_assets/styles/less/pages.less b/generator/_assets/styles/less/pages.less
index ba4381070..a730c8c79 100755
--- a/generator/_assets/styles/less/pages.less
+++ b/generator/_assets/styles/less/pages.less
@@ -70,7 +70,7 @@
     position: sticky;
     top: 12px;
     font-family: "Roboto", Arial, sans-serif;
-
+    transition: top 750ms ease 0s;
     @media @desktop-down {
       max-width: 28rem;
       margin-bottom: 2.4rem;