Angular 路由切换后页面返回顶部

 由于Angular是单页面应用，所以在路由切换后页面的位置并不会像多页面那样重新刷新页面，滚动条置顶，为了解决这个问题，有2种解决方式

一、监听路由事件，在里面做滚动条置顶操作。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
 
declare var $: any;
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(public router: Router) {
 
  }
 
  ngOnInit() {
 
    this.router.events
      .subscribe((event) => {
        $(window).scrollTop(0);
        // window.scrollTo(0, 0)
      });
  }
 
}

二、自 6.1.0-beta.1 版本开始，Angular Router 增加了 scrollPositionRestoration、anchorScrolling 与 scrollOffset 配置项，用于定义路由导航中的位置处理

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 0],
    })
  ]
})

1、scrollPositionRestoration 可能的选项有：

• disabled：什么也不做（当前默认）；
• top：导航后自动回到页面顶部；
• enabled：（后退时）恢复到原始位置或（前进时）基于 anchorScrolling 选项的元素位置（否则置顶）；

2、anchorScrolling 可能的选项有：

• disabled：什么也不做（当前默认）；
• enabled：跳转到当前 Fragment 对应元素的位置（如果有的话）；

3、scrollOffset 用于设定置顶的位置。

 

注意：位置恢复需要在每次导航时记录位置，会增加额外内存占用（一个值为 [number, number] 数组的属性），因此理论上无法进行无限导航（伪内存泄漏）。