Totop

Create a simple to-top scroller.

Usage

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>

```
<a href="#" uk-totop uk-scroll></a>
```

Accessibility

The Totop component automatically sets the appropriate WAI-ARIA roles, states and properties.

The totop icon has the aria-label property, and if an <a> element is used, the button role.

Internationalization

The Totop component uses the following translation strings. Learn more about translating components.

Key	Default	Description
`label`	`Back to top`	`aria-label` attribute.

Theme development

On your tailwind.config.js file, add the Totop component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        totop: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. 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`	`*`