Navigatsiya · molecule
Yuqoriga qaytiş
Uzun sahifa yoki panelda bir ekrandan köp aylantirilgaç pastki burçakda çiqadigan tugma (4.151). Bosilsa boşiga qaytaradi (harakat kamaytirilsa — darhol) va fokusni sahifa boşidagi nişonga ötkazadi — klaviatura foydalanuvçisi pastda qolib ketmaydi. Yaşirin holatda inert. Variantlar: faqat ikon (standart) yoki yozuvli; joylaşuv end · start · center · inline · sticky (içki panel); data-progress — atrofida öqilgan qism halqasi.
Mijoz faolligi — Dilnoza Rahimova
- 18 oktyabr, 10:42 — Taklif yuborildi (12 500 000 söm)
- 17 oktyabr, 16:05 — Qönğiroq: narx böyiça savollar
- 17 oktyabr, 11:20 — Uçraşuv belgilandi
- 16 oktyabr, 09:15 — Ariza saytdan keldi
- 15 oktyabr, 18:30 — Yangi kontakt qöşildi
- 14 oktyabr, 12:00 — Telegram orqali yozdi
- 13 oktyabr, 14:45 — Hisob-faktura körildi
- 12 oktyabr, 10:10 — Demo körsatildi
- 11 oktyabr, 15:25 — Şartnoma loyihasi tayyorlandi
- 10 oktyabr, 09:00 — Birinçi aloqa
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | iconlabel «Yuqoriga» yozuvi körinadi | icon |
data-position | endstartcenterinline oqimdasticky içki panel pastida | end |
data-progress | offon öqilgan qism halqasi | off |
Anatomiya
- root
.fx-backtotopşart - icon
.fx-backtotop__iconixtiyoriy - label
.fx-backtotop__labelşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter | Boşiga qaytaradi, fokus sahifa boşidagi nişonga |
Oddiy havola (<a href="#…">) — JS'siz ham işlaydi. Yaşirinlikda inert: fokus olmaydi. Bosilgaç fokus nişonga (tabindex=-1) ötadi va ekran öquvçi öşa joydan davom etadi. Halqa bezak — ma'no faqat yozuvda.
Kod
AI uçun: qaçon işlatiladi
- Uzun röyxat, hujjat, faollik lentasi, katalog.
- Içki aylanuvçi panel (data-target + data-position="sticky").
npx foxui add backtotop
<div id="faollik" style="max-block-size: 12rem; overflow: auto; padding: var(--fx-space-4); border: var(--fx-border-width-default) solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface)">
<h3 class="fx-heading" data-size="sm" id="faollik-bosh">Mijoz faolligi — Dilnoza Rahimova</h3>
<ol class="fx-list">
<li>18 oktyabr, 10:42 — Taklif yuborildi (12 500 000 söm)</li>
<li>17 oktyabr, 16:05 — Qönğiroq: narx böyiça savollar</li>
<li>17 oktyabr, 11:20 — Uçraşuv belgilandi</li>
<li>16 oktyabr, 09:15 — Ariza saytdan keldi</li>
<li>15 oktyabr, 18:30 — Yangi kontakt qöşildi</li>
<li>14 oktyabr, 12:00 — Telegram orqali yozdi</li>
<li>13 oktyabr, 14:45 — Hisob-faktura körildi</li>
<li>12 oktyabr, 10:10 — Demo körsatildi</li>
<li>11 oktyabr, 15:25 — Şartnoma loyihasi tayyorlandi</li>
<li>10 oktyabr, 09:00 — Birinçi aloqa</li>
</ol>
<a class="fx-backtotop" href="#faollik-bosh" data-fx-backtotop data-target="#faollik" data-offset="60" data-position="sticky" data-progress>
<svg class="fx-backtotop__icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="fx-backtotop__label">Yuqoriga qaytiş</span>
</a>
</div>
<!-- Butun sahifa uchun: <a class="fx-backtotop" href="#top" data-fx-backtotop data-variant="label">…<span class="fx-backtotop__label">Yuqoriga</span></a> -->Tokenlar: --fx-bg-brand-solid --fx-bg-subtle --fx-bg-surface --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-ease-enter --fx-ease-exit --fx-ease-standard --fx-elevation-3 --fx-font-size-sm --fx-font-weight-medium --fx-motion-base --fx-motion-exit-fast --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-shift-md --fx-radius-pill --fx-size-icon-md --fx-space-2 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-primary --fx-z-raised --fx-z-sticky