在Angular中实现锚点滚动延迟的解决方法是使用ScrollingModule
和ViewportScroller
。
首先,确保在app.module.ts
中导入ScrollingModule
:
import { ScrollingModule } from '@angular/cdk/scrolling';
@NgModule({
imports: [
// ...
ScrollingModule
],
// ...
})
export class AppModule { }
然后,在组件中注入ViewportScroller
:
import { Component, Inject } from '@angular/core';
import { ViewportScroller } from '@angular/common';
@Component({
// ...
})
export class YourComponent {
constructor(
@Inject(ViewportScroller) private viewportScroller: ViewportScroller
) { }
scrollToAnchor(anchor: string): void {
this.viewportScroller.scrollToAnchor(anchor);
}
}
最后,在模板中使用锚点并调用scrollToAnchor
方法:
Section 1
Section 2
Section 1 Content
Section 2 Content
这样,当用户点击锚点链接时,页面将平滑滚动到对应的锚点位置。