Develop

src/app/features/command/command-documentation/command-documentation.component.html

@@ -1,6 +1,6 @@
 <h3 class="h4 mt-2">Documentation</h3>
 <div class="flex-fill scroll-box-container">
-  <div class="scroll-box">
+  <div class="scroll-box" #scrollBox>
     <div *ngIf="documentation; else noDoc" [innerHTML]="documentation | markdown"></div>
   </div>
 </div>

src/app/features/command/command-documentation/command-documentation.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'tr-command-documentation',
@@ -7,5 +7,10 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 })
 
 export class CommandDocumentationComponent {
-  @Input() documentation = '';
+  public documentation = '';
+  @ViewChild('scrollBox', {static: true}) scrollBox: ElementRef;
+  @Input('documentation') set resetScroll(document: string) {
+    this.documentation = document;
+    this.scrollBox.nativeElement.scrollTop = 0;
+  }
 }

src/app/features/command/command-list/command-list.component.html

@@ -18,7 +18,7 @@ <h3 class="h4">Commands</h3>
       <input type="text" class="form-control form-control-sm" placeholder="Search command" #search (input)="true">
     </div>
     <div class="flex-fill scroll-box-container command-list-container">
-      <div class="scroll-box">
+      <div class="scroll-box" #scrollBox>
         <ul>
           <li
             *ngFor="let command of filteredCommands | searchFilter: 'key': search.value | searchFilter: 'group': activeCategory"

src/app/features/command/command-list/command-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
 
 import { Command } from '@app/shared/models/command.interface';
 
@@ -15,6 +15,7 @@ export class CommandListComponent {
   activeCommand: Command;
   activeCategory = '';
 
+  @ViewChild('scrollBox', {static: true}) scrollBox: ElementRef;
   @Input('commands') set setCommands(data: Array<Command>) {
     this.filteredCommands = data;
     const array = this.filteredCommands.map(item => item.group);
@@ -55,6 +56,7 @@ export class CommandListComponent {
    * @param category category name
    */
   setActiveCategory(category: string) {
+    this.scrollBox.nativeElement.scrollTop = 0;
     this.activeCategory = category;
   }
 }

src/app/features/pattern/pattern-content/pattern-content.component.html

@@ -15,7 +15,7 @@ <h3 class="h4 position-relative">{{activePattern.title}}</h3>
       </button>
     </div>
 
-    <div class="scroll-box">
+    <div class="scroll-box" #scrollBox>
       <p [innerHTML]="steps[currentStep]  | markdown" *ngIf='steps && steps[currentStep]'></p>
     </div>
 </div>

src/app/features/pattern/pattern-content/pattern-content.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, HostListener, Input, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, Output, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
 
 import { Pattern } from '@app/shared/models/pattern.interface';
 
@@ -15,7 +15,9 @@ enum Paginator {
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PatternContentComponent {
+  @ViewChild('scrollBox', {static: false}) scrollBox: ElementRef;
   @Input('patternContent') set newStep(data: Array<string>) {
+    this.resetScroll();
     this.steps = data;
     this.currentStep = 0;
   }
@@ -49,6 +51,8 @@ export class PatternContentComponent {
    * @param type boolean (TRUE: previous step, FALSE: next step)
    */
   changeStep(type: Paginator) {
+    this.resetScroll();
+
     switch (type) {
       case Paginator.FIRST_PAGE:
         this.currentStep = 0;
@@ -63,4 +67,10 @@ export class PatternContentComponent {
         this.currentStep = this.steps.length - 1;
     }
   }
+
+  private resetScroll() {
+    if (this.scrollBox) {
+      this.scrollBox.nativeElement.scrollTop = 0;
+    }
+  }
 }