I am trying to implement scrolling from one component to another in my application, but at the moment it is only "jumping" to the component, and not scrolling.
I have tried the following:
export class HomeComponent implements OnInit {
scroll(el: HTMLElement) {
el.scrollIntoView({ block: 'start', behavior: 'smooth', inline: 'nearest' });
}
constructor() {
}
ngOnInit() {
}
}
Here is my template:
<section class="bg-full bg-home">
<div class="logo"></div>
<a (click)="scroll(testPortfolio)" href="#portfolio" id="scroll-to-section">
<img src="../../assets/arrow-scroll.svg" width="36">
</a>
</section>
<app-about></app-about>
<app-portfolio-slider #testPortfolio></app-portfolio-slider>
<app-contact></app-contact>
Alternatively, I have also tried with the use of ViewChild()
, but this always returns undefined
as I assume it because <app-portfolio-slider>
is not rendered yet.
What do I need to do in order for the scrolling to happen smoothly?
So my assumption was incorrect. As @arbghl mentioned in comments author just needed to wrap target element with <div>
which has scrollIntoView()
method and use that div as a target element.
Hope that helps.