Angular 5 Tabs 滚动到页面顶部

Posted 2023-03-05

【中文标题】Angular 5 Tabs 滚动到页面顶部

【英文标题】：Angular 5 Tabs scroll to top of the page

【发布时间】：2018-06-24 04:31:19

【问题描述】：

我正在使用 Angular 5 选项卡，问题是当我从一个选项卡切换到另一个选项卡时，页面将滚动到页面顶部。有没有人知道我怎么可能解决这个问题。

<div class="row">
  <div class="col-md-12">
    <mat-tab-group dynamicHeight="true">
      <ng-container *ngFor="let rubric of assessmentForm.rubrics">
        <mat-tab label="rubric.title">
          <div class="table-responsive">
            <table class="table table-bordered wrappedTable">
              <thead>
              <tr>
               <td></td>
              </tr>
              </tfoot>
            </table>
          </div> <!-- /table-responsive -->
        </mat-tab>
      </ng-container>
    </mat-tab-group>
  </div>
</div> <!-- /row -->

我遗漏了表格内的一些代码，可能不会影响问题。

【问题讨论】：

您能否在 plunkr 提供您的问题的复制品？

您使用的是导航标签还是简单标签？

【参考方案1】：

原因是当您更改选项卡时，下一个选项卡的内部内容没有那么多高度，因此父级高度也会降低，这就是它滚动到顶部的原因 可以通过添加最小高度来修复，例如：

<div class="col-md-12" style="min-height:800px;">
  <mat-tab-group dynamicHeight="true">
   ....content
  </mat-tab-group>
</div>