title: Load more button push element up not down in angular app
body: <p>I have a angular application. Till today it works fine in google chrome but today when i click the load more button load more button is still there and push every time 10 product on the top. It mean when we click a more button some data load and more button goes down by scrolling we can load again but in my case load more button always on screen and product load it's top. Scroll position change and keep position always on load button. But in Microsoft Edge it's work fine.
  Could you please help me to solve this problem.
  <a href="https://i.stack.imgur.com/ywB0c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ywB0c.png" alt="enter image description here" /></a></p>
  <h2>my html here..</h2>
  <pre><code> &lt;mat-card class=&quot;mb-2&quot;&gt;
                      &lt;ng-container *ngFor=&quot;let fruit of fruits; let i = index;&quot;&gt;
                          &lt;div class=&quot;row pad-20&quot; *ngIf=&quot;(i % 2 === 0)&quot;&gt;
                              &lt;div class=&quot;col-sm-6 mouse-hover d-flex justify-content-center&quot;&gt;
                                  &lt;img class=&quot;cart-deatils-img&quot; mat-card-image
                                      src=&quot; 
                              {{appHost.hostName}}images/fruitImages/{{fruit?.fileName[0]}}&quot;&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;col-sm-6 vertically-center&quot;&gt;
                                  &lt;mat-card-content&gt;
                                      &lt;br /&gt;
                                      &lt;div&gt;
                                          &lt;span class=&quot;display-2 shadow-text text-center font-weight&gt;
                                              {{fruit?.name}}
                                          &lt;/span&gt;
                                          &lt;span&gt;(&lt;span *ngFor=&quot;let star of getFullStar(fruit?.rating)&quot;
                                                  class=&quot;material-icons color-orange font-13&quot;&gt;
                                                  grade
                                              &lt;/span&gt;
                                              &lt;span *ngFor=&quot;let star of getOutlineStar(fruit?.rating)&quot;
                                                  class=&quot;material-icons color-orange font-13&quot;&gt;
                                                  star_border
                                              &lt;/span&gt;)
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div&gt;
                                          &lt;span *ngIf=&quot;!fruit?.isActive&quot; class=&quot;badge badge-warning 
                                                 shadow-text text-center font-weight-bold my-3&quot;&gt;
                                              Unavailabe
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;mb-4 font-13&quot;&gt;
                                          &lt;span&gt;
                                              {{fruit?.description}}
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;a class=&quot;no-decoration font-13&quot;
                                          routerLink=&quot;/general-user/fruit/details/{{fruit?.id}}&quot;&gt;
                                          &lt;button mat-mini-fab color=&quot;warn&quot;
                                              aria-label=&quot;Example icon button with a filter list icon&quot;&gt;
                                              &lt;mat-icon&gt;call_missed_outgoing&lt;/mat-icon&gt;
                                          &lt;/button&gt; &lt;span style=&quot;padding: 10px;&quot;&gt;SEE DETAILS&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/mat-card-content&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;row mt-4 pad-20&quot; *ngIf=&quot;!(i % 2 === 0)&quot;&gt;
                              &lt;div class=&quot;col-sm-6 vertically-center&quot;&gt;
                                  &lt;mat-card-content&gt;
                                      &lt;br /&gt;
                                      &lt;div&gt;
                                          &lt;span class=&quot;display-2 shadow-text text-center font-weight- 
                                             bold my-3&quot;&gt;
                                              {{fruit?.name}}
                                          &lt;/span&gt;
                                          &lt;span&gt;(&lt;span *ngFor=&quot;let star of getFullStar(fruit?.rating)&quot;
                                                  class=&quot;material-icons color-orange font-13&quot;&gt;
                                                  grade
                                              &lt;/span&gt;
                                              &lt;span *ngFor=&quot;let star of getOutlineStar(fruit?.rating)&quot;
                                                  class=&quot;material-icons color-orange font-13&quot;&gt;
                                                  star_border
                                              &lt;/span&gt;)
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div&gt;
                                          &lt;span *ngIf=&quot;fruit?.isActive&quot; class=&quot;badge badge-success 
                              shadow-text text-center font-weight-bold my-3&quot;&gt;
                                              Availabe
                                          &lt;/span&gt;
                                          &lt;span *ngIf=&quot;!fruit?.isActive&quot;&gt;
                                              Unavailabe
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;mb-4 font-13&quot;&gt;
                                          &lt;span&gt;
                                              {{fruit?.description}}
                                          &lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;a class=&quot;no-decoration font-13&quot;
                                          routerLink=&quot;/general-user/fruit/details/{{fruit?.id}}&quot;&gt;
                                          &lt;button mat-mini-fab color=&quot;warn&quot;
                                              aria-label=&quot;Example icon button with a filter list icon&quot;&gt;
                                              &lt;mat-icon&gt;call_missed_outgoing&lt;/mat-icon&gt;
                                          &lt;/button&gt; &lt;span style=&quot;padding: 10px;&quot;&gt;SEE DETAILS&lt;/span&gt;
                                      &lt;/a&gt;
                                  &lt;/mat-card-content&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;col-sm-6 mouse-hover d-flex justify-content-center&quot;&gt;
                                  &lt;img class=&quot;cart-deatils-img&quot; mat-card-image
                                      src=&quot; 
                                  {{appHost.hostName}}images/fruitImages/{{fruit?.fileName[0]}}&quot;&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/ng-container&gt;
                      &lt;div *ngIf=&quot;!noMore&quot; class=&quot;mb-1 mt-4 font-roboto row d-flex justify-content- 
                     center&quot;&gt;
                              &lt;button type=&quot;button&quot; class=&quot;btn-not-focus&quot; mat-raised-button style=&quot;
  
  background: #F25C05; color: white; width: 250px;
                      font-size: 15px;&quot; (click)=&quot;onLoadMore()&quot;&gt;
                                  &lt;span *ngIf=&quot;!isProgress&quot; class=&quot;material-icons icon-vertical&quot;&gt;
                                      hourglass_empty
                                  &lt;/span&gt;
                                  &lt;span *ngIf=&quot;!isProgress&quot; class=&quot;font-with-text&quot;&gt; Load More 
    Fruit&lt;/span&gt;
                                  &lt;span *ngIf=&quot;isProgress&quot; class=&quot;processing-span&quot;&gt;Loading Fruit 
     Wait...
                                      &lt;mat-spinner [diameter]=&quot;30&quot; class=&quot;spinner-sapn&quot;&gt;&lt;/mat-spinner&gt;
                                  &lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/mat-card&gt;
  </code></pre>
  <h1>and my load more function is here</h1>
  <pre><code>    onLoadMore(){
          this.isProgress = true;
          this.fruitService.getByCount(this.fruits.length).subscribe((res: any) =&gt; {
            if (res.obj != null) {
              let fruit = res.obj;
              let length = fruit.length;
              if(length &lt; 4){
                this.noMore = true;
              }
              for(let i = 0; i &lt; fruit.length; i++){
                this.fruits.push(fruit[i]);
              }
            }
            this.isProgress = false;
          }, e =&gt;{      
            this.isProgress = false;
            this.noMore = true;
          });
        }
  
   
  </code></pre>
  <h1>and I load every route here</h1>
  <pre><code>    &lt;mat-sidenav-container class=&quot;sidenav-container font-roboto&quot;&gt;
        &lt;!-- &lt;mat-sidenav [opened]=&quot;showAllTabNav&quot; #drawer class=&quot;sidenav&quot; fixedInViewport&gt; --&gt;
        &lt;mat-sidenav-content&gt;
          &lt;ng-content&gt;&lt;/ng-content&gt;
          &lt;div&gt;
            &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
        &lt;/mat-sidenav-content&gt;
      &lt;/mat-sidenav-container&gt;
  </code></pre>