Angular 2路由时无法实现平滑滚动，报语法错误求解析

嘿，我来帮你把这个问题拆明白！

首先，先解释这个错误的核心含义：
这个报错是jQuery的选择器语法错误——你代码里用了/contact作为jQuery的选择器，但jQuery完全不认识这种格式！正常的jQuery选择器是类（比如.header）、ID（比如#contact）或者标签名（比如div），而/contact看起来是你的路由路径，根本不是合法的选择器，所以jQuery直接抛出了语法错误，平滑滚动自然也跟着失效了。

结合你贴的导航栏代码（navbar-fixed-top+page-scroll），推测你原本想做的是：点击导航链接跳转到对应路由后，平滑滚动到页面上的某个锚点区域。那接下来给你几个解决步骤：

第一步：修正选择器错误 #

如果你的目标是滚动到页面上ID为contact的元素，把所有用到/contact的选择器改成$('#contact')；如果是类名，就改成$('.contact')——总之要严格符合jQuery选择器的语法规则。

第二步：Angular 2中实现路由跳转+平滑滚动的正确姿势 #

因为Angular是单页应用，直接用jQuery的滚动逻辑可能和路由跳转时机冲突，更推荐用Angular原生的方式：

方式1：利用Angular路由的锚点滚动功能 #

在你的路由配置文件里（比如app-routing.module.ts），启用锚点滚动和位置恢复：

import { RouterModule, Routes } from '@angular/router';

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

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled' // 启用锚点滚动
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

然后在导航链接里，用routerLink指定路由，加上fragment属性指定要滚动到的元素ID：

<a routerLink="/contact" fragment="contact-section" class="page-scroll">联系我们</a>

这样跳转到/contact路由后，页面会自动平滑滚动到ID为contact-section的元素。

方式2：手动实现自定义平滑滚动 #

如果需要更定制化的滚动动画，可以在组件里监听路由跳转完成事件，然后手动触发滚动：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 获取URL中的锚点（去掉#）
      const targetId = window.location.hash.slice(1);
      if (targetId) {
        const targetElement = document.getElementById(targetId);
        if (targetElement) {
          // 原生JS平滑滚动，支持现代浏览器
          targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
          // 如果要用jQuery的话，确保jQuery已引入：
          // $('html, body').animate({ scrollTop: targetElement.offset().top }, 600);
        }
      }
    });
  }
}

同样，导航链接要加上fragment属性，和方式1一致。

第三步：检查jQuery与Angular的混用问题 #

你的导航栏有page-scroll类，可能之前用了Bootstrap的scrollspy或者其他jQuery滚动插件，但在Angular中混用jQuery时要注意：路由跳转是无刷新的，jQuery的事件绑定可能不会自动重新生效，所以尽量优先用Angular原生的API来实现功能，避免不必要的冲突。

内容的提问来源于stack exchange，提问作者Mr. Learner