Tornado Logo

Scrollspy - Tornado UI v2

scrollspy is an effect that tracks certain elements and activate a list item with the current viewed area on the user screen if it matchs the ID in that item.

ScrollSpy Structure

in order to create and apply the Scrollspy Effect first we create and Menu with ul tag and class name scrollspy and inside the menu we create our list items with li from here there is two ways to create the scroll event effect and identfiy it #01 adding a attribute data-target=”#ID” to the li tag element or create inside the li a Hyperlink element and write the ID inside the href attribute and you can change the animation speed with attribute data-duration with millisecond

<!-- Scrollspy Trackers List -->
<ul class="scrollspy">
    <li><a href="#section-1">Section 01</a></li>
    <li data-target="#section-2">Section 02</a></li>
    <li><a href="#section-3" data-duration="3000">Section 03</a></li>
    <li><a href="#section-4">Section 04</a></li>
</ul>

<!-- Tracked Elements -->
<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
<div id="section-4"></div>

Smoth Scroll Without Scrollspy

you can use the smoth scroll effect by adding class name smoth-scroll to the Hyperlink or your Clickable Element and add to the href or data-target attribute value of the target ID and you can change the animation speed with attribute data-duration with millisecond

<!-- Smoth Scroll Trigger --->
<a href="#targetID" data-duration="1000"></a>

<!-- Target to Scroll to -->
<div id="targetID"></div>

Scrollspy Demo Example

Section Number 01
Section Number 02
Section Number 03
Section Number 04

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.