پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<button class="radikalwp-nav-backtop" data-backtop aria-label="بازگشت به بالای صفحه"><span class="radikalwp-nav-backtop-arrow">↑<//span><//button>
.radikalwp-nav-backtop {
  position: fixed;
  bottom: 26px;
  left: 26px;
  z-index: 60;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #4f46e5;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #e0e7ff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(79, 70, 229, .18);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .3s ease;
}
.radikalwp-nav-backtop.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.radikalwp-nav-backtop:hover { background: #fff; }
.radikalwp-nav-backtop:active { transform: scale(.92); }
// نمایش بعد از ۴۰۰ پیکسل اسکرول + پرش نرم به بالا
document.querySelectorAll('[data-backtop]').forEach(function (btn) {
  var sync = function () { btn.classList.toggle('is-visible', window.scrollY > 400); };
  window.addEventListener('scroll', sync, { passive: true });
  sync();
  btn.addEventListener('click', function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
});

درباره این اسنیپت

دکمه گرد شناور «بازگشت به بالا» که بعد از اسکرول ظاهر می‌شود، شیشه‌ای مات است و با فلش بالارونده پر می‌شود؛ جزئیات آشنای همه سایت‌های مدرن. با چند خط JS نمایش/مخفی و اسکرول نرم انجام می‌شود و هیچ کتابخانه‌ای لازم ندارد. برای صفحات بلند وبلاگ، آرشیو و لیست‌های نامتناهی مناسب است. موقعیت ثابت گوشه پایین-چپ دارد.

پرسش‌های متداول

عدد 400 در شرط scrollY را تنظیم کنید؛ صفحات کوتاه‌تر عدد کمتر و لیست‌های بلند عدد بیشتر می‌خواهند.

تا ترنزیشن محو و سرخوردن اجرا شود؛ display نمی‌تواند انیمیت شود و پرش زشت می‌کرد. pointer-events هم کلیک در حالت مخفی را می‌بندد.

مقدار bottom را در موبایل بالای ارتفاع تب‌بار (حدود 70px) ببرید تا روی هم نیفتند؛ media query کوچکی کافی است.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پیش‌نمایش زنده اسنیپت

نوار پیشرفت اسکرول بالای صفحه

ناوبری اسکرول پیشرفت
۸۰
۴.۵ (۱۲)
پیش‌نمایش زنده اسنیپت

دکمه بازگشت به بالا شناور

ناوبری بازگشت شناور
۴۷
۴.۲ (۷)

منوی نقطه‌ای صفحات

ناوبری نقطه‌ای لندینگ
۲۰
۴.۸ (۳)