Bootstrap smoothscroll and scrollbar Premium 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 pageScroll to the your links

Example code:


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

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 pageScroll [pageScrollOffset]="0" [pageScrollDuration]="2000" [pageScrollEasing]="functionName" [pageScrollInterruptible]="false" (pageScrollFinish)="doSmth($event)" href="#theanchor">Visit</a>

Basic example
Smoothscroll options