العودة للأعلى BackTop

زر العودة إلى أعلى الصفحة الذي يظهر بعد تجاوز التمرير عتبة معيّنة.

العودة إلى الأعلى

<template>
  <div class="demo-col" style="max-width: 640px">
    <p class="demo-note">مرّر للأسفل داخل الحاوية متجاوزًا visibilityHeight (200px)، فيظهر زر العودة إلى الأعلى في الزاوية السفلية</p>
    <div ref="scroller" class="anchor-scroller">
      <div v-for="i in 20" :key="i" class="anchor-sec">
        <h3>القسم {{ i }}</h3>
        <p>مرّر للأسفل ثم انقر على زر الزاوية السفلية.</p>
      </div>
    </div>
    <LhBackTop :target="scrollerEl" :visibility-height="200" :right="24" :bottom="24" smooth />
  </div>
</template>

<script>
export default {
  data: () => ({
    scrollerEl: undefined,
  }),
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
target	حاوية التمرير (محدِّد أو عنصر، الافتراضي إطار العرض)	string \| HTMLElement	—
visibilityHeight	عدد البكسلات التي يُتجاوزها في التمرير قبل الظهور	number	—
right	إزاحة عن الحافة الجانبية بالبكسل	number	—
bottom	إزاحة عن الحافة السفلية بالبكسل	number	—
smooth	هل يكون التمرير سلسًا	boolean	false
sx	خصائص التخطيط السريع sx	—	—

Slots

فتحة	الوصف
default	محتوى الزر (عند عدم تمريره يُعرض أيقونة السهم الافتراضية)