Smooth Scroll


Click on the links below to see the live example



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


Example code:



        <!--Navigation links with a Smooth SCroll effect-->
        <ul class="smooth-scroll">
            <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


You can see the live example of customized Scroll Bar on the right of our website.


Add a 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, however Firefox doesn't support a ScrollBar customization yet


    /* Scrollbar */
    
    ::-webkit-scrollbar {
        width: 8px;
    }
    /* 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;
    }