Bootstrap smoothscroll and scrollbar Premium component
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 our website, on the right.
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: 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;
}