uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
594 lines (551 loc) • 31.6 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scrollspy - UIkit tests</title>
<script src="js/test.js"></script>
<style>
.test-fixed {
position: fixed;
top: 20px;
right: 20px;
z-index: 1;
}
</style>
</head>
<body>
<div class="uk-card uk-card-default uk-card-body test-fixed">
<h3 class="uk-card-title">Scrollspy Nav</h3>
<ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
<li><a href="#animation-repeat">Single</a></li>
<li><a href="#animation-delay">Group</a></li>
<li><a href="#animation-fade">Fade</a></li>
<li><a href="#animation-scale-up">Scale Up</a></li>
<li><a href="#animation-scale-down">Scale Down</a></li>
<li><a href="#animation-slide-left">Slide Left</a></li>
<li><a href="#animation-slide-right">Slide Right</a></li>
<li><a href="#animation-slide-top">Slide Top</a></li>
<li><a href="#animation-slide-bottom">Slide Bottom</a></li>
<li><a href="#animation-different">Different Animations</a></li>
<li><a href="#animation-stroke">Stroke</a></li>
<li><a href="#animation-stroke-fade">Stroke + Fade</a></li>
<li><a href="#adjacent1">Adjacent 1</a></li>
<li><a href="#adjacent2">Adjacent 2</a></li>
</ul>
</div>
<div class="uk-container">
<h1>ScrollSpy</h1>
<h2 id="animation-repeat">Single, Repeat, Delay</h2>
<div class="uk-child-width-1-4@m" uk-grid uk-height-match="target: .uk-card">
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-fade">
<p>The element is animated only the first time it appears in the viewport.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
<p>The element is animated every time it appears in the viewport.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; delay: 1500; repeat: true">
<p>The element is animated every time it appears in the viewport but delayed by 1.5s.</p>
</div>
</div>
</div>
<h2 id="animation-delay">Group, Repeat, Delay</h2>
<div class="uk-child-width-1-4@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>The animation of this element is delayed by some milliseconds.</p>
</div>
</div>
</div>
<h2 id="animation-fade">Group: Fade</h2>
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2 id="animation-scale-up">Group: Scale Up</h2>
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-scale-up; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div><div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2 id="animation-scale-down">Group: Scale Down</h2>
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-scale-down; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Scale Down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2 id="animation-slide-left">Group: Left</h2>
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-left; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2 id="animation-slide-right">Group: Right</h2>
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-right; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2 id="animation-slide-top">Group: Top</h2>
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-top; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2 id="animation-slide-bottom">Group: Bottom</h2>
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2 id="animation-different">Different Animations</h2>
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
<h3 class="uk-card-title">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
<h3 class="uk-card-title">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<h2 id="animation-stroke">Group: Stroke</h2>
<div class="uk-child-width-1-4@m uk-text-center uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-stroke; target: svg; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Stroke</h3>
<img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Stroke</h3>
<img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Stroke</h3>
<img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<h3 class="uk-card-title">Stroke</h3>
<img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
</div>
</div>
</div>
<h2 id="animation-stroke-fade">Different Animations: Stroke + Fade</h2>
<div class="uk-child-width-1-4@m uk-text-center uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-stroke; target: .uk-card, svg; delay: 300; repeat: true">
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-fade">
<h3 class="uk-card-title">Stroke</h3>
<img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-fade">
<h3 class="uk-card-title">Stroke</h3>
<img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-fade">
<h3 class="uk-card-title">Stroke</h3>
<img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-fade">
<h3 class="uk-card-title">Stroke</h3>
<img width="80" height="80" src="images/icons.svg#cloud-upload" uk-svg="stroke-animation: true">
</div>
</div>
</div>
<h2>Adjacent Sibling (Test for Scrollspy Nav)</h2>
<div id="adjacent1" class="uk-section uk-section-primary uk-text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="adjacent2" class="uk-section uk-section-secondary uk-text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>JavaScript Options</h2>
<h3>Scrollspy</h3>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>cls</code></td>
<td>String</td>
<td></td>
<td>Class to toggle when the element enters/leaves viewport.</td>
</tr>
<tr>
<td><code>target</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>Target to apply the scrollspy to. Defaults to the element itself.</td>
</tr>
<tr>
<td><code>hidden</code></td>
<td>Boolean</td>
<td>true</td>
<td>Hides the element while out of view.</td>
</tr>
<tr>
<td><code>margin</code></td>
<td>String</td>
<td>-1px</td>
<td>The margin is added to the viewport's bounding box, before computing an intersection with the element. (Must be px or % units)</td>
</tr>
<tr>
<td><code>repeat</code></td>
<td>Boolean</td>
<td>false</td>
<td>Applies the 'cls' class every time the element is in view.</td>
</tr>
<tr>
<td><code>delay</code></td>
<td>Number</td>
<td>0</td>
<td>Delay time in ms.</td>
</tr>
</tbody>
</table>
</div>
<h3>Scrollspy Nav</h3>
<div class="uk-overflow-auto">
<table class="uk-table uk-table-striped">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>cls</code></td>
<td>String</td>
<td>uk-active</td>
<td>Class to add to the active links.</td>
</tr>
<tr>
<td><code>closest</code></td>
<td>Boolean, CSS selector</td>
<td>false</td>
<td>Target to apply the class to. Defaults to the element itself.</td>
</tr>
<tr>
<td><code>scroll</code></td>
<td>Boolean</td>
<td>false</td>
<td>Adds the Scroll component to its links.</td>
</tr>
<tr>
<td><code>target</code></td>
<td>CSS selector</td>
<td>a[href]</td>
<td>Targets the anchor elements that should be used.</td>
</tr>
<tr>
<td><code>offset</code></td>
<td>Number</td>
<td>0</td>
<td>Offset added to scroll top.</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>