要实现Angular路由过渡跳转到离开路由的顶部,可以使用window.scrollTo()
方法将滚动位置设置为顶部。
首先,在需要实现过渡跳转的路由组件中,使用HostListener
装饰器监听路由变化事件。当路由变化时,执行滚动到顶部的方法。
import { Component, HostListener } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-my-component',
template: '...'
})
export class MyComponent {
constructor(private router: Router) {}
@HostListener('window:scroll', ['$event'])
onScroll(event: Event) {
// 监听滚动事件,记录当前滚动位置
}
@HostListener('window:popstate', ['$event'])
onPopState(event: Event) {
// 监听浏览器历史记录变化事件,判断是否为路由返回
// 如果是路由返回,执行滚动到之前记录的滚动位置的方法
}
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
// 路由开始变化时,记录当前滚动位置
}
if (event instanceof NavigationEnd) {
// 路由结束变化时,执行滚动到顶部的方法
}
});
}
scrollToTop() {
window.scrollTo(0, 0);
}
}
上述代码中,通过HostListener
装饰器监听window
对象的滚动事件和浏览器历史记录变化事件。在NavigationStart
事件中记录当前滚动位置,在NavigationEnd
事件中执行滚动到顶部的方法。
此外,还需要在模板文件中添加一个返回顶部的按钮,并绑定到scrollToTop()
方法。
这样,当路由发生变化时,页面会自动滚动到顶部,并且可以通过点击按钮返回顶部。