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


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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags