Angular Bootstrap scrollbar and SmoothScroll MDB Pro component

Click on the links below to see the live example

Click to scroll to section 1
Click to scroll to section 2

To achieve Smooth Scroll effect add a directive mdbPageScroll to the links.

Basic example


<!--Navigation links with a Smooth SCroll effect-->
<ul>
    <li>
        <h5><a mdbPageScroll href="#test1">Click to scroll to section 1</a></h5>
    </li>
    <br>
    <li>
        <h5><a mdbPageScroll href="#test2">Click to scroll to section 2</a></h5>
    </li>
    <br>
</ul>

<!--Dummy sections with IDs coressponding with the links above-->
<div id="test1">
    <h3>Section 1</h3>
    <hr>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
</div>

<div id="test2">
    <h3>Section 2</h3>
    <hr>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
    <h5>Smooth Scroll Example</h5>
</div>

Section 1

Smooth Scroll Example

Section 2

Smooth Scroll Example

In order to activate Smooth Scroll from one route page to another route page, you need to add a directive mdbPageScroll
and [routerLink]="['/your-link-direction']" to the <a> element in order to activate smoothScroll after clicking on this item.
In example your's navigation should looks like this below.

                
    <nav>
        <ul>
            <a [routerLink]="['/primary']" mdbPageScroll href="#scroll"><li>PrimaryComponent</li></a>
            <a [routerLink]="['/secondary']" mdbPageScroll href="#scroll2"><li>SecondaryComponent</li></a>
            <a [routerLink]="['/home']" mdbPageScroll href="#scroll3"><li>HomeComponent</li></a>
            <a [routerLink]="['/']"><li>Default page</li></a>
        </ul>
    </nav>
    <router-outlet></router-outlet>

And your's router configuration for this example should like this below:

                
    const appRoutes: Routes = [
        { path: 'primary', component: PrimaryComponent },
        { path: 'secondary', component: SecondaryComponent },
        { path: 'home', component: HomeComponent },
        ]

Smoothscroll options

PageScroll properties

Name	Type	Default	Description
[pageScrollHorizontal]	boolean	false	Whether the scroll should happen in vertical direction (false, default) or horizontal (true).
[pageScrollOffset]	number	0	Pixels to offset from the top of the element when scrolling to (positive value = scrolling will stop given pixels atop the target element).
[pageScrollDuration]	number	2000	Duration in milliseconds the whole scroll-animation should last.
[pageScrollSpeed]	number	3000	Speed in Pixel/Second the animation should take. Only applied if no duration is set.
[pageScrollInterruptible]	boolean	true	Whether the scroll animation should stop if the user interferes with it (true) or not (false).
[pageScrollEasing]	string		Easing method to be used while calculating the scroll position over time (default is linear easing).
[pageScrollSpeed]	number	3000	Speed in Pixel/Second the animation should take. Only applied if no duration is set.

PageScroll events

Name	Type	Default	Description
[pageScrollFinish]	string		Fired when the scroll-animation stops. Emits a boolean value which indicates whether the scroll animation finished successfully and reached its target (true) or not (false). Possible reasons for false: target not found or interrupted due to another scroll animation starting or user interaction.


<a mdbPageScroll [pageScrollOffset]="0" [pageScrollDuration]="2000" [pageScrollEasing]="functionName" [pageScrollInterruptible]="false" (pageScrollFinish)="doSmth($event)" href="#theanchor">Visit</a>

Scroll Bar customization

Add the following CSS code to your project:

Note 1: To change the color of the Scroll Bar, you have to edit a value of the "background" property

Note 2: It works fine with Chrome and Opera, but Firefox doesn't support yet a ScrollBar customization.


/* Scrollbar */

::-webkit-scrollbar {
    width: 11px;
}
/* Track */

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Handle */

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #your-color;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
   background: #your-color;
}

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Smoothscroll:

// For MDB Angular Pro
import { SmoothscrollModule } from 'ng-uikit-pro-standard'

Import example Modules list