diff --git a/projects/ledge-render/src/lib/ledge-render.component.html b/projects/ledge-render/src/lib/ledge-render.component.html
index 5b9511c1..cf607eb5 100644
--- a/projects/ledge-render/src/lib/ledge-render.component.html
+++ b/projects/ledge-render/src/lib/ledge-render.component.html
@@ -5,7 +5,7 @@
 </div>
 
 <div class="ledge-render" *ngIf="virtualScroll">
-  <virtual-scroller #scroll [items]="markdownData" (vsUpdate)="vsUpdate($event)">
+  <virtual-scroller #scroll [items]="markdownData" (vsChange)="vsChange($event)">
     <div *ngFor="let item of scroll.viewPortItems" class="markdown render-item">
       <ng-template *ngTemplateOutlet="renderItem; context: {$implicit: item}"></ng-template>
     </div>
diff --git a/projects/ledge-render/src/lib/ledge-render.component.ts b/projects/ledge-render/src/lib/ledge-render.component.ts
index 2dc8d659..0d13da7f 100644
--- a/projects/ledge-render/src/lib/ledge-render.component.ts
+++ b/projects/ledge-render/src/lib/ledge-render.component.ts
@@ -10,7 +10,7 @@ import { Token, Tokens, TokensList } from 'marked';
 import marked, { Slugger } from 'marked/lib/marked';
 import LedgeMarkdownConverter from './components/model/ledge-markdown-converter';
 import LedgeColors from './support/ledgeColors';
-import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
+import { IPageInfo, VirtualScrollerComponent } from 'ngx-virtual-scroller';
 
 @Component({
   selector: 'ledge-render',
@@ -64,7 +64,9 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
       if (!this.virtualScroller) {
         return;
       }
-      this.virtualScroller.scrollToIndex(this.headingMap[this.scrollToItem], false, 66, 0);
+      this.virtualScroller.scrollToIndex(this.headingMap[this.scrollToItem], true, 0, 0, () => {
+        this.scrolling = false;
+      });
     }
   }
 
@@ -384,15 +386,9 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
     return JSON.stringify(str);
   }
 
-  vsUpdate($event: any[]) {
-    for (const mdItem of $event) {
-      if (mdItem.type === 'heading') {
-        if (mdItem.headingIndex !== this.lastHeading) {
-          this.lastHeading = mdItem.headingIndex;
-          this.headingChange.emit(mdItem);
-        }
-        return;
-      }
+  vsChange($event: IPageInfo) {
+    if (this.indexHeadingMap[$event.startIndex]) {
+      this.headingChange.emit(this.markdownData[$event.startIndex]);
     }
   }
 }
diff --git a/src/app/features/markdown-render/markdown-render.component.ts b/src/app/features/markdown-render/markdown-render.component.ts
index 6d09aa8b..60153dad 100644
--- a/src/app/features/markdown-render/markdown-render.component.ts
+++ b/src/app/features/markdown-render/markdown-render.component.ts
@@ -48,7 +48,7 @@ export class MarkdownRenderComponent
 
   toItem = 0;
   tocFragmentMap = {};
-  private tocIndex = 0;
+  private tocIndex = -1;
 
   private lastTocId: string;
   private scrollItems: any[] = [];
@@ -69,13 +69,15 @@ export class MarkdownRenderComponent
       markedOptions
     ).bind(this);
     if (this.virtualScroll) {
-      /*   this.router.events.subscribe((event: any) => {
+      this.router.events.subscribe((event: any) => {
         if (event instanceof ActivationEnd) {
           const activationEnd = event as ActivationEnd;
-          const tocIndex = this.tocFragmentMap[encodeURIComponent(activationEnd.snapshot.fragment)];
+          const tocIndex = this.tocFragmentMap[
+            encodeURIComponent(activationEnd.snapshot.fragment)
+          ];
           this.toItem = tocIndex;
         }
-      });*/
+      });
     }
   }
 
@@ -154,18 +156,16 @@ export class MarkdownRenderComponent
 
   render() {
     const items = this.tocify.tocItems;
-    this.tocIndex = 0;
+    this.tocIndex = -1;
     this.tocStr = this.renderToc(items).join('');
     if (this.tocEl && this.tocEl.nativeElement) {
       this.tocEl.nativeElement.innerHTML = this.tocStr;
     }
 
-    this.tocIndex = 0;
     this.tocLeftStr = this.renderTocLeftPoint(items).join('');
     if (this.tocLeftEl && this.tocLeftEl.nativeElement) {
       this.tocLeftEl.nativeElement.innerHTML = this.tocLeftStr;
     }
-    this.tocIndex = 0;
     this.tocify.reset();
 
     setTimeout(() => this.startSyncMenu(), 10);
@@ -215,9 +215,12 @@ export class MarkdownRenderComponent
       const link = `<a id="menu-${item.anchor}" href="${href}" title=${item.text}>${item.text}</a>`;
       this.tocFragmentMap[encodeURIComponent(item.anchor)] = this.tocIndex;
       if (item.children) {
+        const parentIndex = JSON.stringify(this.tocIndex);
         const childrenItems = this.renderToc(item.children);
-        return `<div class="level_${item.level}" data-tocId="${this.tocIndex}">
-${link}<div class="level_child">${childrenItems.join('')}</div>
+        return `<div class="level_${
+          item.level
+        }" data-tocId="${parentIndex}">${link}
+<div class="level_child">${childrenItems.join('')}</div>
 </div>`;
       } else {
         return `<div class="level_${item.level}" data-tocId="${this.tocIndex}">${link}</div>`;