Topic: Smooth scroll angular

Alberto pro asked 4 years ago


Hi, smooth scroll works in angular if you are on the same route, does not if you are coming from a different route. For example if I am in ['/home'] and smoothscroll to href="#test" it performs as expected but if I am in ['/client'] and select <a [routerlink]="['/home']" mdbPageScroll href=#test> click me  </a> it navigates to the route correctly but it does not calculate the scroll position correctly

Alberto pro commented 4 years ago

Hi just checking in...

Dawid Adach pro commented 4 years ago

Alberto, my apologies for lack of response, we were hoping to provide you with the fix for that but apparently, it's more complicated than we originally assumed. We have noted the bug and will try to fix it as soon as possible.

JaronRH pro commented 4 years ago

Thanks for the update!

Alberto pro commented 4 years ago

Thanks for the update!.

Damian Gemza staff answered 4 years ago


Hi Alberto, Please send me your's project @ d.gemza@mdbootstrap.com . I'll take a look and search for some errors :) Best Regards, Damian

Damian Gemza staff answered 4 years ago


Hello again, Alberto,

Are you're sure, that you use mdbPageScroll directive correctly? Maybe you make some mistakes in your's router configuration?? I tried to create situation simillary to your's but for me, it's everything is okay.
I created some navigation like:

<h1>Angular Router</h1>
<nav>
<ul>
<a [routerLink]="['/primary']"mdbPageScrollhref="#scroll"><li>Primary</li></a>
<a [routerLink]="['/secondary']"mdbPageScrollhref="#scroll2"><li>Secondary</li></a>
<a [routerLink]="['/home']"mdbPageScrollhref="#scroll3"><li>HomeComponent</li></a>
<a [routerLink]="['/']"><li>Default page</li></a>
</ul>
</nav>
<router-outlet></router-outlet>

Angular Router

My router configuration in app.module.ts looks like below:
const appRoutes: Routes = [
{path: 'primary', component: PrimaryComponent},
{path: 'secondary', component: SecondaryComponent},
{path: 'home', component: HomeComponent},
{path: '', redirectTo: 'localhost:4200', pathMatch: 'full'}
]

And it's everything is okay. When i click links, they're scrolling smooth to their's id.
Please check one more time if you have properly implemented routes, and if you have mdbPageScroll directive. Without this directive, you won't be able to use smoothscroll.
Best Regards,
Damian


Alberto pro commented 4 years ago

Hi, yes routes are ok and mdbpagescroll in place. It navigates correctly and scrolls, just scrolls to the wrong spot About Us Meet the team Service hours Service Area Testimonials Pet Slideshow Request Appointment


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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