Gezinme · Back to top

Başa dön

Uzun sayfada iki ekran aşağı inince beliren bağlantı. Başa kaydırır ve odağı ana içeriğe verir.

CSS: kararlı
JavaScript: görünürlük
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

HTML kodunu göster

<a class="kiris-basa-don" href="#ana-icerik" data-kiris="basa-don" data-hep-goster><svg class="kiris-simge" aria-hidden="true"><use href="#kiris-tool-back"/></svg><span>Başa dön</span></a>

Ne zaman kullanılır

Üç ekrandan uzun sayfalarda kullanın.
Form adımlarında kullanmayın. Adımlar kısa olur.

Erişilebilirlik

Bir bağlantıdır, #ana-icerik hedefine gider. Betik yoksa da çalışır.
Hareket azaltma isteyen kullanıcıda kaydırma anlıktır.

Karşılanan WCAG 2.2 ölçütleri 2.4.1 2.3.3

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: IT, JP, DK, FR, CH.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-back-to-top ile başlayan sınıflar
Davranış betiği, data-kiris="basa-don" başlatıcısı