要在Angular 8中滚动到一个片段,但不滚动到页面顶部,可以使用Angular的内置ScrollingModule
和ViewportScroller
服务来实现。
首先,确保已经导入了ScrollingModule
:
import { ScrollingModule } from '@angular/cdk/scrolling';
然后,在你的模块中将其添加到imports
数组中:
@NgModule({
imports: [
ScrollingModule
],
...
})
export class AppModule { }
接下来,在你的组件中注入ViewportScroller
服务:
import { ViewportScroller } from '@angular/common';
constructor(private viewportScroller: ViewportScroller) { }
现在,你可以在需要滚动到片段的地方使用viewportScroller
来滚动:
scrollToFragment(fragment: string): void {
const element = document.getElementById(fragment);
if (element) {
this.viewportScroller.scrollToAnchor(fragment);
}
}
在HTML模板中,你可以使用scrollToFragment
方法来触发滚动:
这样,当你点击按钮时,页面将滚动到具有id为myFragment
的元素位置,但不会滚动到页面顶部。
请注意,要使滚动生效,你需要确保目标片段具有唯一的id,并且在调用scrollToFragment
之前,目标片段已经在DOM中可见。