We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Create a simple to-top scroller.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Totop component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
totop: {
hooks: {}
}
}
}),The Totop component allows you to apply an icon to your to-top scroller. Just add the uk-totop attribute to an <a> element.
To add a smooth effect when using the totop to jump up the page, use the Scroll component.
<a href="" uk-totop></a>Learn more about using hooks.
| Hook Name | Affected Classes |
|---|---|
hook-totop | .uk-totop |
hook-hover | .uk-totop:hover |
hook-active | .uk-totop:active |
hook-misc | * |
The Totop component automatically sets the appropriate WAI-ARIA roles, states and properties.
aria-label property, and if an <a> element is used, the button role.The Totop component uses the following translation strings. Learn more about translating components.
| Key | Default | Description |
|---|---|---|
label | Back to top | aria-label attribute. |