我有 Angular 8 应用程序。
我有下一个和上一个的导航按钮。但所以我想实现当触发下一个时您将导航到页面顶部。
所以我有这个:
<h4 id="heading" #goUp class="echeq-title">{{ currentEcheqPage.title }}</h4>
和 ts 文件:
export class EcheqPageComponent implements OnInit, AfterViewInit {
@Input() currentEcheqPage: EcheqPage;
@Input() currentEcheqPager: EcheqPager;
@ViewChild('goUp', {static: false}) contentPage: ElementRef;
// We use template variables to query the components
@ViewChildren('echeqElement') elementComponents: QueryList<EcheqElementComponent>;
EcheqElement = EcheqElement;
elementsChanged = true;
container: HTMLElement;
constructor( private echeqService: EcheqService ) { }
ngOnInit() {
// document.getElementById ('heading').scrollIntoView();
}
ngAfterViewInit(): void {
this.showUp();
}
}
private showUp(): void {
this.contentPage.nativeElement.scrollTo( 0, 0 );
}
但我没有收到错误。但它也没有导航到页面顶部。在本例中为 h4 标题。
那么我必须改变什么?
谢谢。
最佳答案
TypeScript/JavaScript 中的文档对象有一个名为“scrollIntoView”的函数,可用于滚动到特定元素。在您的情况下,您可以创建一个函数,如下面的代码片段所示:
showUp() {
const element = document.querySelector('#goUp');
element.scrollIntoView();
}
希望对您有帮助。 :-)
关于javascript - 单击 Angular 8 滚动到页面顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61599597/