Topic: Angular Smooth Scroll
RobK7 pro asked 6 years ago
HiSmooth scroll doesnt seem to work at least as I expectI have my app.component.html where the <app-navbar></app-navbar> and <router-outlet></router-outlet> tags are.In the navbar component have a nav like this:
<mdb-navbar SideClass="navbar fixed-top navbar-expand-md navbar-dark">
<logo>
...
</a>
</logo>
<links>
<ul class="navbar-nav mr-auto">
<li class="nav-item active waves-light" routerLinkActive="active" mdbWavesEffect>
<a class="nav-link" [routerLink]="['home']" mdbPageScroll href="#scroll1">Home
</a>
</li>
<liclass="nav-item waves-light"mdbWavesEffect>
<a class="nav-link" [routerLink]="['about']" mdbPageScroll href="#scroll2"><span>About</span>
</li>
<li class="nav-item waves-light"mdbWavesEffect>
<a class="nav-link" [routerLink]="['another']" mdbPageScroll href="#scroll3" ><i class="fa fa-phone-square" aria-hidden="true" ></i>Another Thing</a>
</li>
</ul>
</links>
</mdb-navbar>
And in the content of my another components (HomeComponent, AboutComponent, AnotherComponent) there's a div sourronding the content i want to displayHome<div id="scroll1">Hello world from Home</div>About<div id="scroll2">Hello world from About</div>Another<div id="scroll3">Hello world from Another</div> Finally In my app.routing.ts are my routes
const appRoutes : Routes =[
{ path:'home', component:HomeComponent },
{ path:'about', component : AboutComponent },
{ path:'another', component : AnotherComponent },
{ path:'',redirectTo : 'home', pathMatch: 'full' }
];
export const routing = RouterModule.forRoot(appRoutes)
So I expect 2 scenario but neither of 2 works... so correct me if im wrong
1 When my app starts I land in home so if I scroll down home it will be able to see the next (about, another) components (the components will render on scroll)
2. When I use my navbar and click in the navbar item it will automatically scrolls down (and render) the components between one component and another...
What i recive is just a normal change into components...
When I try to make in one component with dummy divs this works but brokes the router-outlet paradigm its what I try to acomplish
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 6 years ago
Dear RobK7, I've tried to reproduce your case, but using your code works fine for me. When the page is loaded, router /home is placed, and the browser shows HomeComponent. When I'll add some margin to div "Hello world from Home", the page is smoothscrolled to this div. And the same situation is with About component. Could you please send me your project without node_modules directory at <a href="mailto:d.gemza@mdbootstrap.com">d.gemza@mdbootstrap.com</a> ? It would help me debug your problem. Best Regards, Damian