菜单
Backtop component for back-to-top button. Invoke when user needs to provide quick navigation back to the top of a long page.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Element Plus Skills Library - A comprehensive skill library for AI agents to understand and utilize Element Plus UI components. Invoke when user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.
Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.
Alert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.
Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.
Autocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.
Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.
| name | el-backtop |
| description | Backtop component for back-to-top button. Invoke when user needs to provide quick navigation back to the top of a long page. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Backtop component provides a button to scroll back to the top of the page.
<template>
<el-backtop />
</template>
<template>
<el-backtop :bottom="100">
<div class="backtop-custom">
UP
</div>
</el-backtop>
</template>
<style>
.backtop-custom {
height: 100%;
width: 100%;
background-color: var(--el-bg-color-overlay);
box-shadow: var(--el-box-shadow-lighter);
text-align: center;
line-height: 40px;
color: #1989fa;
}
</style>
<template>
<div class="scroll-container" style="height: 400px; overflow: auto;">
<el-backtop target=".scroll-container" :visibility-height="100">
UP
</el-backtop>
</div>
</template>
| Name | Description | Type | Default |
|---|---|---|---|
| target | Target to trigger scroll | string | — |
| visibility-height | Min height to show button | number | 200 |
| right | Right distance | number | 40 |
| bottom | Bottom distance | number | 40 |
| Name | Description | Type |
|---|---|---|
| click | Triggers when clicked | (evt: MouseEvent) => void |
| Name | Description |
|---|---|
| default | Customize default content |
visibility-height for your layoutright and bottomtarget for scrollable containers