חזרה לראש העמוד

יושב בפינה ההתחלתית של השורה, כלומר בעברית משמאל — כדי לא להתנגש בכפתור הנגישות שיושב בצד השני. הגלילה החלקה מוחלפת בקפיצה מיידית כשהמשתמש ביקש פחות תנועה. חזרה לראש העמוד הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · ניווט · נגישות · בלי ספריות

<!-- חזרה לראש העמוד -->
<style>
  .klix-top { position: fixed; bottom: 1.25rem; inset-inline-start: 1.25rem; z-index: 40;
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
    border: 0; border-radius: 999px; background: #1e293b; color: #e2e8f0; cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,.8);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease }
  .klix-top[data-show="1"] { opacity: 1; transform: none; pointer-events: auto }
  html[data-motion="off"] .klix-top { transition: none }
</style>

<button class="klix-top" id="klix-top" type="button" aria-label="חזרה לראש העמוד">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M12 19V5"/><path d="m5 12 7-7 7 7"/>
  </svg>
</button>

<script>
(function () {
  var AFTER = 600;   // אחרי כמה פיקסלים של גלילה הכפתור מופיע

  var btn = document.getElementById('klix-top');
  if (!btn) return;

  function update() {
    btn.setAttribute('data-show', window.scrollY > AFTER ? '1' : '0');
  }

  btn.addEventListener('click', function () {
    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
  });

  update();
  window.addEventListener('scroll', update, { passive: true });
})();
</script>