دکمه بازگشت به بالای صفحه یکی از بهترین روشها برای بهبود تجربه کاربری در وبسایت است. تصور کنید لینک پرداخت یا فرم تماس شما در ابتدای برگه قرار دارد و کاربر برای مشاهده جزئیات محصول یا مقاله، تا اواسط یا انتهای صفحه اسکرول کرده است. در چنین شرایطی، وجود یک دکمه جذاب و شناختهشده که با یک کلیک کاربر را به ابتدای برگه بازگرداند، میتواند هم دسترسی سریعتری ایجاد کند و هم احتمال تبدیل کاربر به مشتری را افزایش دهد.
مطالعات تجربه کاربری (UX) نشان دادهاند که ابزارهای ناوبری سریع در صفحات طولانی، از خستگی کاربر جلوگیری کرده و تعامل او با وبسایت را بیشتر میکنند. به همین دلیل، افزودن دکمه بازگشت به بالا در المنتور یک راهکار ساده و در عین حال حرفهای است.
چطور میتوان دکمه بازگشت به بالای صفحه را در المنتور ایجاد کرد؟
به طور کلی، برای ایجاد دکمه بازگشت به بالای صفحه در المنتور میتوان از دو روش استفاده کرد:
روش اول: استفاده از HTML، CSS و JS
با این روش میتوانید یک دکمه شناور و بسیار زیبا برای بازگشت سریع به ابتدای برگه ایجاد کنید. در ادامه مقاله، کد کامل و نحوه قرار دادن آن در المنتور آموزش داده خواهد شد.
روش دوم: بدون نیاز به کدنویسی
در این روش از ویجت دکمه (Button) و لنگر منو (Menu Anchor) در المنتور استفاده میکنیم. جزئیات این روش نیز در ادامه مقاله توضیح داده خواهد شد.
روش اول- افزودن کد دکمه بازگشت به بالای صفحه با ویجت HTML و کدهای آماده
استفاده از ویجت HTML و کدهای آماده یکی از سریعترین و سادهترین روشها برای اضافه کردن دکمه بازگشت به بالای صفحه در المنتور است. با سه مرحله ساده میتوانید این دکمه را به برگه خود اضافه کنید:
-
اضافه کردن ویجت HTML به برگه:
ابتدا وارد ویرایشگر المنتور شوید و یک ویجت HTML به برگه اضافه کنید. این ویجت فضایی برای قرار دادن کدهای مربوطه فراهم میکند.
-
وارد کردن کدهای آماده
در این مرحله، کافی است کدهای زیر را در ویجت HTML کپی کنید:
<style>
.dn-btn{position:fixed;left:50px;bottom:50px;width:46px;height:46px;border-radius:100%;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(15px);transition:all .2s linear;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);z-index:9000;background-color:#FFF;}
.dn-btn.active{opacity:1;visibility:visible;transform:translateY(0);}
.dn-btn svg{position:absolute;top:0;left:0;transform:rotate(-90deg);width:100%;height:100%;}
.dn-btn svg path{fill:none;stroke:#4793ff;stroke-width:4;transition:stroke-dashoffset .2s linear;}
.dn-btn::after{content:'⮝';font-weight:900;position:absolute;top:50%;left:50%;width:46px;height:46px;line-height:46px;text-align:center;color:#4793ff;z-index:1;transition:opacity .2s;font-family: Arial, sans-serif;font-size: 19px;transform: translate(-50%, -50%);}
.dn-btn:hover::after{opacity:0.7;}
@media only screen and (max-width: 770px) {.dn-btn{left:19px;bottom:19px;}}
</style>
<div class="dn-btn" id="DNscroll">
<svg viewBox="-1 -1 102 102"><path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/></svg>
</div>
<script>
const DNbtn=document.getElementById('DNscroll');
const DNpath=DNbtn.querySelector('path');
const len=DNpath.getTotalLength();
DNpath.style.strokeDasharray=len; DNpath.style.strokeDashoffset=len;
function updateDN() {
const scroll = window.scrollY;
const height = document.body.scrollHeight - window.innerHeight;
let DNupbtnprogress = Math.min(Math.max(scroll * len / height, 0), len);
DNpath.style.strokeDashoffset = len - DNupbtnprogress;
DNbtn.classList.toggle('active', scroll > 50);
}
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
updateDN();
ticking = false;
});
ticking = true;
}
});
DNbtn.addEventListener('click',()=>window.scrollTo({top:0,behavior:'smooth'}));
updateDN();
</script>
-
انتشار یا بروزرسانی برگه
در نهایت، برگه را منتشر یا بروزرسانی کنید تا دکمه بازگشت به بالای برگه روی سایت شما فعال شود.
روش دوم- ساخت دکمه بازگشت به بالا در المنتور بدون کدنویسی
اگر میخواهید دکمه بازگشت به بالای صفحه را بدون کد اماده بسازید، این روش مناسب شماست؛ کمی زمانبر اما ساده و کاربردی است.
-
افزودن ویجت دکمه و اعمال تنظیمات:
- وارد ویرایشگر المنتور شوید و یک ویجت دکمه (Button) به برگه اضافه کنید.
- در تب محتوا، متن دکمه را پاک کرده و یک آیکن مناسب برای آن انتخاب کنید.
- درتب پیشرفته جایگاه آن را ثابت انتخاب کرده و جهت افقی را سمت راست یا چپ برگه قرار دهید.جهت عمودی را نیز پایین انتخاب کنید.
- بهتر است کمی فاصله برای جهات افقی و عمودی تنظیم کنید تا دکمه از لبههای برگه فاصله داشته باشد و ظاهر بهتری پیدا کند.
- در تب پیشرفته، مقدار Z-Index را یک عدد بزرگ (مثلاً 9000) وارد کنید تا دکمه روی تمام المانها نمایش داده شود.
- برای ظاهر زیباتر دکمه، در تب پیشرفته یک ماسک گرد برای آن تنظیم کنید و در بخش موشن افکت، انیمیشن ورود را روی Fade In Up قرار دهید.
- در صورت تمایل، میتوانید رنگ پسزمینه و فونت دکمه را در تب استایل تغییر دهید.
-
اضافه کردن ویجت لنگرمنو (Menu Anchor) به برگه:
- در این مرحله لازم است یک ویجت لنگرمنو (Menu Anchor) به ابتدای برگه (اولین ویجت) اضافه کنید. البته بهتر است این ویجت در ابتدای هدر قرار داده شود تا بازگشت به بالای برگه شامل هدر نیز بشود.
- در تب محتوا، برای ویجت لنگر منو (Menu Anchor) یک شناسه (ID) تنظیم کنید، مثلا: top-btn
-
تنظیم شناسه لنگر در ویجت دکمه
به ویجت دکمه بازگشت به بالای برگه بروید و در تب محتوا (بخش پیوند) شناسهای که به لنگر دادهاید را وارد کنید، مثلا: #top-btn
-
انتشار یا بروزرسانی برگه
در نهایت، برگه را منتشر یا بروزرسانی کنید تا دکمه بازگشت به بالای برگه روی سایت شما فعال شود.
مقایسه دو روش ساخت دکمه بازگشت به بالا در المنتور
در هر دو روش، دکمه بازگشت به بالای برگه در المنتور ایجاد میشود، اما روش اول (استفاده از کدهای آماده) سریعتر بوده و دکمه زیباتر و حرفهایتری به برگه اضافه میکند. علاوه بر این، در روش اول میزان اسکرول صفحه به شکل یک Progress Bar در اطراف دکمه نمایش داده میشود که باعث افزایش جذابیت شده و تجربه کاربری صفحه را بهبود میدهد.
