# scroll

The markup of every demo on <https://kuiper.oeds.it/scroll/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## scroll

Varies: 3 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card text-center"><a class="button button-primary" href="#scroll" data-scroll>scroll</a></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card text-center"><a class="button button-primary" href="#scroll" data-scroll="offset: 100;">offset 100</a></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card text-center"><a class="button button-primary" href="#scroll-bottom" data-scroll="offset: 200;">offset 200</a></div></div>
</div>
```

## target

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card"><div class="height-viewport background-white-dark"><p class="background-muted text-center">a screen of page</p></div><p id="scroll-bottom" class="background-muted text-center">scroll-bottom</p></div></div>
</div>
```