I have angular 8 application.
And I have navigation buttons for next and previous. But so I want to archieve that you will be navigate to top of the page when next is triggerd.
So I have this:
<h4 id="heading" #goUp class="echeq-title">{{ currentEcheqPage.title }}</h4>
and ts file:
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 );
}
But I don't get error. But also it is not navigating to top of page. IN this case the h4 heading.
So what I have to change?
Thank you.
This is the solution:
@ViewChild('goUp', { static: true }) contentPage: ElementRef;
ngOnChanges(): void {
this.showUp();
}
showUp() {
this.contentPage.nativeElement.scrollIntoView();
}
The document object in typescript/javascript, has a function called "scrollIntoView", which can be used to scroll to a specific element. In your case you could created a functions as seen on the snippet below:
showUp() {
const element = document.querySelector('#goUp');
element.scrollIntoView();
}
Hope that was helpful to you. :-)
If I understand you correctly, change the following section:
private showUp(): void {
window.scroll(0,0);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.