Bootstrap scrollbar and SmoothScroll MDB Pro component

Bootstrap smooth scroll is an animated movement from a trigger - button, link or any other clickable element. - to another place of the same page.

To achieve Smooth Scroll effect add a class .smooth-scroll to the parent element of your links 

                
<!--Navigation links with a Smooth SCroll effect-->
<ul class="smooth-scroll list-unstyled">
    <li>
        <h5><a href="#test1">Click to scroll to section 1</a></h5></li>
    <br>
    <li>
        <h5><a 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
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example

Section 2

Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example
Smooth Scroll Example

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;
}