Angular 返回ngIf部分的顶部

我有一个角度SPA，页面包含记录列表或编辑记录部分（包括编辑历史）。初始状态是显示记录列表

因为有些记录有很长的编辑历史，所以将其放在编辑的顶部会使其更易于使用。HTML5支持

#top

，对吗？实际上，它会切换回非编辑模式，显示记录列表：(

HTML格式如下：

<div *ngIf="editMode">
  <a id="top"></a>
  record detailed content here
  <hr>
  long history of record editing here
  <a href="#top">Back to top of Editing</a><!-- Nope, it actually toggles back to non-editing mode shows list of records -->
<div>
 
<div *ngIf="!editMode">
  <mat-card *ngFor="let rec of listRec">
  ...
  <input type=button (click)="switchToEditMode()">Edit</input>
  </mat-card>
</div>

更新，这是按照@RedJandal的建议使用手动滚动进行的工作方式，将其添加到HTML

<span #myTop id="myTop"></span>
<button (click)="toMyTop()">go to Top</button>

---

注意，要使用

代替

，请务必删除

href=#

，因为您使用的是锚定标记，页面正在刷新，这就是它切换回非编辑模式的原因

自动滚动 自Angular v6以来，对于

RouterModule

，有一个新的

anchorScrolling

选项。您可以在模块的导入中设置它：

imports: [
  ...,
  RouterModule.forRoot(routes, {anchorScrolling: 'enabled'})

这样，Angular将自动滚动到具有给定片段id的元素

⚠️ 但是，当异步加载数据时，这不起作用，请参见此。⚠️

---

手动滚动 还不能通过

路由模块

，但您可以手动执行：

获取您的目标，例如使用

ViewChild

：

@ViewChild('pageInfo') pageInfo: ElementRef; 

在

nativeElement

上调用

ScrollInView

：

const targetElement = this.pageInfo.nativeElement
targetElement.scrollIntoView({behavior: "smooth"})

---

@IsmaelPadilla这是一个伪代码，解释，更新，谢谢你指出。除了编码之外，你介意解释一下自动滚动和手动滚动的区别吗？使用自动滚动，你只需要打开功能，锚定标记就可以工作。但是正如我提到的，异步数据目前有一个问题。使用手动，你就是手动的定义要滚动到的元素。这将给您更多的控制，但这意味着手动滚动需要更多的工作，请将此添加到HTML

，将此添加到TS

@ViewChild（“myTop”）myTop:ElementRef；toMyTop（）{const targetElement=This.myTop.nativeElement；targetElement.scrollIntoView（{behavior:“smooth”}）；}

返回顶部后立即将页面刷新回列表模式。@Jeb50您能确认您已从链接中删除href=“#top”吗？太棒了，就是这样！

@ViewChild('pageInfo') pageInfo: ElementRef; 

const targetElement = this.pageInfo.nativeElement
targetElement.scrollIntoView({behavior: "smooth"})