ScrollTop
Appears after scrolling and returns to the top
- usage
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
<script>
let box
</script>
<div class="relative h-48">
<div bind:this={box} class="h-full overflow-y-auto p-3">
<p>Row 1</p>
<p>Row 2</p>
<p>Row 3</p>
<p>...</p>
</div>
<ScrollTop target={box} class="absolute!" />
</div>- rounded
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
<ScrollTop target={box} rounded class="absolute!" />- icon
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
<script>
import { ChevronUp } from 'spaper/icons'
</script>
<ScrollTop target={box}
icon={ChevronUp}
class="absolute!" />- Custom content
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
Row 9
Row 10
Row 11
Row 12
Row 13
Row 14
Row 15
Row 16
<ScrollTop target={box} class="absolute!">
Top
</ScrollTop>This component "extends" Button, therefore you may also use any of its props.