Angular 5使用URL fragment实现筛选时如何禁止页面自动滚动

问题根因 #

你遇到的问题是Angular的默认锚点定位逻辑导致的：当URL的fragment发生变化时，Angular会自动查找页面上id与fragment内容匹配的DOM元素，并滚动到该元素的位置。你新增的地点下拉选择器所在模块的id与你生成的location前缀fragment匹配，所以每次选择地点更新fragment都会触发自动滚动。

解决方案 #

方案1：全局关闭锚点滚动（推荐，适配Angular 6.1及以上版本）

直接在路由配置中禁用Angular的自动锚点滚动功能，修改你项目根路由模块的RouterModule配置即可，该改动不会影响你用fragment传递筛选参数的逻辑，仅取消自动滚动行为：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的原有路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    anchorScrolling: 'disabled' // 新增这一行关闭自动锚点滚动
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

注：如果你使用的是Angular 5，可直接使用下方方案2或方案3解决。

方案2：修改fragment命名规则

如果你不想全局关闭锚点滚动，可以调整筛选参数生成的fragment格式，避免和页面上的元素id重名。比如把原来的#/location:london改成#/filter-location:london，只要不与你页面上任何DOM元素的id匹配，就不会触发自动滚动。

方案3：手动控制滚动位置（适配所有Angular版本）

如果你必须保留现有的fragment格式，可以在搜索页组件中监听路由变化，手动重置滚动位置：

// 搜索页组件.ts
import { Router, NavigationEnd } from '@angular/router';

constructor(private router: Router) {
  // 记录页面加载完成后的初始滚动位置
  let initScrollTop = 0;
  window.addEventListener('load', () => {
    initScrollTop = window.pageYOffset;
  });

  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      // 路由变化后重置到初始滚动位置，也可以根据需求设置为你需要的位置
      window.scrollTo(0, initScrollTop);
    }
  });
}

内容的提问来源于stack exchange，提问作者ali