How to scroll to a component from another component in Angular?
Question
I've been hours, even a couple of days trying to get this done but i can't find a solution, I've tried everything but haven't found a case like mine.
I'm trying to scroll to another component in my one-page website from a navbar, which is another component. The main app component I set like this:
<body> <app-navbar></app-navbar> <app-page-one id="page-one"></app-page-one> <app-page-two id="page-two"></app-page-two> <app-page-three id="page-three"></app-page-three> <app-footer></app-footer> </body>
As you can see i put an id on each component so i could identify it when trying to scroll.
I want to click the Page Three button inside my navbar for it to scroll down to the page three component. My navbar component looks like this:
<body class="body"> <header class="header"> <a href="#" class="logo">LOGO</a> <div class="menu-toggle"> <fa-icon [icon]="faBars" transform="grow-20"></fa-icon> </div> <nav class="nav"> <ul> <li> <a href="#">Page One</a> </li> <li> <a href="#">Page Two</a> </li> <li > <a href="#">Page Three</a> </li> </ul> </nav> </header> </body>
I've tried using Ngx Page Scroll and everything, but can't seem to make it work. I'm not sure if I need to use Input Output to make them communicate or something like that, anything will help, thanks.
2 answers
solution1
1 ACCPTED 2021-06-17 16:58:35
Each href needs to have a reference to what element.id you want ngx-page-scroll to move the viewport to. Therefore the body should be something like this.
<li>
<a href="#page-one">Page One</a>
</li>
<li>
<a href="#page-two">Page Two</a>
</li>
<li >
<a href="#page-three">Page Three</a>
</li>
If you refer to the npm page and look at the url, https://www.npmjs.com/package/ngx-page-scroll#usage . You can see there is both a link and an element reference( #usage ) to the Usage section ( id="usage" ) of the documentation.
solution2
0 2021-06-17 18:32:09
you can use angular router fragment or the angular cdk for scrolling. I find the angular router is the easiest, but I will give you the link for the angular cdk in case you don't like this way.
first thing on index.html declare a style tag - because without it smooth scrolling won't smooth scroll.
index.html
<style>
html {
scroll-behavior: smooth;
}
</style>
you can change the scroll offset as you see fit app-router.module.ts
imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
scrollOffset: [0, 64]})]
then your component.ts
<li>
<a routerLink="." fragment="page-one" >Page One</a>
</li>
<li>
<a routerLink="." fragment="page-two">Page Two</a>
</li>
<li >
<a routerLink="." fragment="page-three">Page Three</a>
</li>
edit your component.css a{ cursor: pointer }
you can also do this to scroll to fragments on other views. https://angular.io/api/router/RouterLink
you might need to add a # on each fragment which is better than id #page-two as an example. and you would change the fragment to reflect that. the cdk way is in this link https://material.angular.io/cdk/scrolling/overview
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.