نحوه ساخت دکمه رفتن به بالا صفحه

آیا تا به حال شده است که یک پست یا مقاله واقعا طولانی وبلاگ را بخوانید و سپس مجبور شوید تا به بالای صفحه بروید تا به منو برسید؟ ممکن است کمی ناخوشایند و خسته کننده باشد. رفع آن آسان است، می‌توانید مطالعه این مقاله و آموزش نحوه ساخت دکمه رفتن به بالای صفحه ، یک منوی ثابت داشته باشید یا همانطور که در اینجا خواهید آموخت، می‌توانید راهی سریع و شیک برای بازگشت به بالا در سایت خود ارائه کنید.

دکمه بازگشت به بالا جی کوئری چیزی است که احتمالاً بسیاری از شما در بسیاری از وب سایت ها دیده اید. این همان فلشی است که وقتی در وب سایت شروع به پیمایش می کنید، در گوشه سمت راست پایین صفحه وب ظاهر می شود و پس از کلیک کردن، شما را به بالای صفحه بازمی گرداند.

اگر می‌خواهید در حالی که همچنان در حال ساختن یک وب‌سایت هستید، ساخت دکمه رفتن به بالا را اضافه کنید، یا فقط کنجکاو هستید که بدانید چگونه می‌توانید آن را به تنهایی بسازید، به سایت ما خوش آمدید!

دکمه بازگشت به بالا چیست؟

این یک نماد فلش شکل است که معمولاً در گوشه سمت راست پایین صفحه قرار می گیرد. وقتی آن را می زنید – صفحه به سمت بالا حرکت می کند.

چرا به دکمه بازگشت به بالا نیاز دارم؟

این واقعا برای کاربر راحت است، به خصوص اگر صفحه طولانی باشد و محتوای زیادی داشته باشد. دکمه بازگشت به بالا تجربه کاربر را بهبود می بخشد و بازدید از سایت شما را برای شخص دلپذیرتر می کند.

ساخت دکمه رفتن به بالا چگونه انجام می شود؟

این شامل یک بخش طراحی CSS و یک اسکریپت جی کوئری است که باعث می شود کار کند.

بازگشت به بالا با دکمه جی کوئری. کد ما از دو بخش تشکیل شده است، استایل CSS و یک اسکریپت کوچک جی کوئری. بیایید با CSS شروع کنیم.

ساخت دکمه رفتن به بالا
ساخت دکمه رفتن به بالا

استایل های CSS برای دکمه جی کوئری بازگشت به بالا

بریم تا ساخت دکمه رفتن به بالا رو شروع کنیم! ابتدا با ایجاد style و نشانه گذاری برای دکمه خود شروع می کنیم. این قسمت HTML است:

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/font- 
awesome/4.5.0/css/font-awesome.min.css"> 

<a id="button"></a>

این دکمه فقط از یک تگ انکر یا تگ a با یک دکمه id تشکیل می شود. ما همچنین پیوندی به کتابخانه FontAwesome اضافه می کنیم تا بتوانیم از یک نماد برای دکمه خود استفاده کنیم. Style های اولیه برای دکمه به صورت زیر است:

#button { 
   display: inline-block; 
   background-color: #FF9800; 
   width: 50px; 
   height: 50px; 
   text-align: center; 
   border-radius: 4px; 
   margin: 30px; 
   position: fixed3; 
   bottom: 30px; 
   right: 30px; 
   transition: background-color .3s; 
   z-index: 1000;
} 
#button:hover { 
   cursor: pointer; 
   background-color: #333; 
} 
#button: active { 
    background-color: #555%; 
}

از آنجایی که دکمه یک عنصر انکر است و انکرها به طور پیش فرض عناصر درون خطی هستند، باید ویژگی display را به بلوک inline تغییر دهیم تا بتوانیم ابعادی را به آن اختصاص بدهیم.

بیایید آن را به یک دکمه مربع 50 * 50  پیکسل با گوشه های گرد 4 پیکسلی تبدیل کنیم.  ما به آن یک رنگ نارنجی روشن و یک حاشیه 30 پیکسلی هم در هر طرف می دهیم.

ایجاد موقعیت ثابت و همیشگی برای دکمه ما را قادر می‌سازد تا زمانی که صفحه را پیمایش می‌کنیم در همان نقطه باقی بماند و z-index با عدد بسیار بالا اطمینان می‌دهد که دکمه همیشه روی سایر عناصر وب‌سایت همپوشانی دارد.

وقتی ماوس را روی یک دکمه نگه می داریم مکان نما به یک اشاره گر تغییر می کند و پس زمینه خاکستری تیره می شود. برای اینکه انتقال صاف شود، انتقال 0.3 ثانیه را به ویژگی background-color اختصاص می دهیم. همچنین با کلیک بر روی دکمه، رنگ پس زمینه نیز تغییر می کند و کمی روشن تر می شود.

اضافه کردن یک آیکون

در حال حاضر دکمه ما خالی است، پس بیایید یک نماد به آن اضافه کنیم.  ما این کار را با اضافه کردن یک :: بعد از شبه عنصر مانند زیر انجام می دهیم:

#button: : after { 
   content: "\f077"; 
   font-family: FontAwesome; 
   font-weight: normal; 
   font-style: normal; 
   font-size: 2em; 
   line-height: 50px; 
   color: #fff; 
}

می‌خواهیم نمادی را از محبوب‌ترین کتابخانه فونت FontAwesome انتخاب کنیم.
برای نمایش آن به صورت شبه عنصر، font-family را روی FontAwesome تنظیم کنید و مقدار یونیکد نماد خود را به ویژگی content اختصاص دهید.

همچنین اگر می خواهید به صورت افقی در مرکز قرار گیرد مطمئن شوید که ارتفاع خط شما با ارتفاع آیکون شما برابر است.

افزودن عملکرد دکمه رفتن به بالا با جی کوئری

برای ساخت دکمه رفتن به بالا در این بخش فرعی، ما در واقع به شما نشان می دهیم که چگونه دکمه را همانطور که انتظار می رود اعمال کنید. ساده ترین راه برای رسیدن به این هدف استفاده از کتابخانه جاوا اسکریپت jQuery است. ابتدا باید jQuery را به نشانه گذاری HTML کد خود اضافه کنیم. این کد خطی را درست قبل از بسته شدن تگ body اضافه کنید.

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/ 
jquery/3.1.1/jquery.min.js"></script>

اکنون می توانیم اسکریپت خود را با استفاده از سینتکس جی کوئری بنویسیم. پس در ادامه اسکریپت زیر را بعد از خط جی کوئری اضافه کنید:

<script> 
jQuery(document).ready(function() { 
   var btn = $('#button'); 
   $ (window).scroll(function() { 
        if ($(window).scrol1Top() > 300) { 
          btn.addClass('show'); 
        } else { 
          btn.removeClass('show'); 
        } 
      }); 
      btn.on('click', function(e) { 
         e.preventDefault(); 
         $('html, body').animate({scrollTop:0}, 
    '300'); 
       }); 
     }); 
     </script>

بیایید نگاهی دقیق تر به این اسکریپت بیندازیم.

متوجه خط اول کد خواهید شد:

jQuery(document).ready(function() {

اساساً می‌گویند، کد داخل این تابع را فقط زمانی اجرا کنید که سند به طور کامل بارگذاری شود. این یک راه عالی برای جلوگیری از خطاها است، مثلا در صورتی که کد جاوا اسکریپت شما بخواهد در قسمت هایی از صفحه وب که به طور کامل در مرورگر بارگذاری نشده اند تغییراتی ایجاد کند بسیار موثر است.

کدی که پس از بارگیری کامل سند اجرا می کنیم از دو تکه کد اصلی تشکیل شده است که هر کدام کار خود را انجام می دهند.

در این مرحله از ساخت دکمه رفتن به بالا، قسمت اول اسکریپت باعث می شود دکمه ما ظاهر شود و بعد از اینکه پیمایش صفحه به یک نقطه خاص رسید ناپدید شود. قسمت دوم باعث می‌شود بعد از کلیک روی دکمه، صفحه به سمت بالا حرکت کند. بیایید هر یک را با جزئیات بررسی کنیم.

نمایان شدن و ناپدید شدن دکمه

این کدی است که این کار را انجام می دهد:

var btn $( '#button'); 


   $(window).scroll(function() { 
       if ($(window).scrol1Top() 300) { 
         btn.addClass('show'); 
      } else { 
btn.removeClass ('show'); 
      } 
    });

ابتدا یک متغیر btn را اعلام می کنیم و آن را به عنصری با شناسه باتن معلوم می کنیم تا بعداً در کد به آن مراجعه کنیم. همچنین این به جاوا اسکریپت کمک می کند تا محاسبات را سریعتر انجام دهد. هنگامی که عنصر را در یک متغیر ذخیره می کنیم، جاوا اسکریپت نیازی به جستجو در کل صفحه برای هر باری که نیاز به استفاده مجدد از آن در کد خود را داریم، نخواهد داشت.

.scroll()

جی کوئری دارای یک تابع مفید است. scroll () کاری که انجام می دهد این است که یک قطعه کد را متصل می کند که هر بار که یک رویداد scroll (اسکرول) در صفحه وب شما اتفاق می افتد اجرا شود. تابعی است که هر بار هنگام پیمایش صفحه اجرا می شود یک پارامتر طول می کشد. اگرچه می‌توانید آن را روی هر عنصر قابل پیمایش اعمال کنید، مانند فریم‌ها و عناصر با ویژگی سرریز یا overflow که روی اسکرول تنظیم شده‌اند، معمولاً آن را روی عنصر پنجره اعمال می‌کنیم، زیرا در بیشتر موارد، از جمله مثال ما، پیمایش در اینجا رخ می‌دهد.

$(window).scroll(function() {

در داخل تابع عبارت if / else را قرار می دهیم:

if ($(window).scrollTop() >300) { 
  btn.addClass('show'); 
} else { 
   btn.removeClass('show'); 
}

برای ساخت دکمه رفتن به بالا، کاری که ما در اینجا می‌خواهیم انجام دهیم این است که موقعیت عمودی نوار اسکرول را بررسی کنیم و زمانی که دکمه ما در زیر یک نقطه خاص قرار دارد ظاهر شود و وقتی بالای آن نقطه قرار دارد ناپدید شود.

برای به دست آوردن موقعیت فعلی نوار اسکرول، از یک روش داخلی جی کوئری. scrollTop () استفاده می کنیم. هیچ آرگومان نمی گیرد و به سادگی تعدادی پیکسل را که در بالای ناحیه قابل پیمایش پنهان شده اند، برمی گرداند.

بنابراین، هر بار که ما یک اسکرول انجام می دهیم، جاوا اسکریپت بررسی می کند که چند پیکسل پنهان شده است و آنها را با یک عدد مقایسه می کند. بطور مثال آن عدد را روی 300 تنظیم کرده‌ایم، اما اگر بخواهید می توانید آن را تغییر دهید.

اگر از 300 پیکسل عبور کنیم، یک کلاس show به عنصر دکمه خود اضافه می کنیم که ظاهر آن را نشان می دهد. اگر عدد کمتر از 300 باشد، آن کلاس را حذف می کنیم. اضافه کردن و حذف کلاس ها دلیل دیگری برای محبوبیت جی کوئری در ساخت دکمه رفتن به بالا است. ما می توانیم این کار را با دو روش ساده addClass () و removeClass () انجام دهیم. با این حال، ما هنوز کلاس show را در CSS خود نداریم، بنابراین بیایید آن را اضافه کنیم:

if ($(window).scrollTop() > 300) { 
   btn.addClass('show'); 
 } else { btn.removeClass('show'); 
 }

به طور پیش فرض دکمه ما مخفی می شود، بنابراین باید چند قانون دیگر را به عنصر #button اضافه کنیم:

#button { 
    transition: background-color .3s, 
       opacity .5s, visibility .5s; 
   opacity: 0; 
   visibility: hidden; 
}

برای اینکه تغییر آهسته شود، دو مقدار دیگر به ویژگی انتقال اضافه می کنیم، opacity و visibility که تنظیم شده روی 0.5 ثانیه.

ساخت دکمه رفتن به بالا

در روند ساخت دکمه رفتن به بالا
قسمت دوم اسکریپت به شما امکان می دهد پس از کلیک بر روی دکمه به بالای صفحه بروید.

btn.on('click', function(e) { 
   e.preventDefault(); 
   $('html, body').animate({scrollTop:0}, 
'300'); 
   });

اولین متد جی کوئری که در اینجا می بینیم روی () است. اولین پارامتر آن رویداد جاوا اسکریپت «کلیک» است که هر بار زمانی که ماوس را در مرورگر خود کلیک می کنیم، رخ می دهد. پارامتر دوم یک تابع کنترل کننده است که به محض وقوع رویداد فعال می شود.

تابع handler یک پارامتر رویداد را می گیرد. می‌توانیم نام آن را هر چه می‌خواهیم بگذاریم، اما معمولاً e یا event ترجیح داده می‌شوند. ما به پارامتر event نیاز داریم تا آن را به تابع منتقل کنیم و برای متد () preventDefault استفاده کنیم.

روش e.preventDefault () از انجام عمل پیش‌فرض رویداد جلوگیری می‌کند، برای مثال یک پیوند ما را به صفحه بعدی نمی‌برد. در مورد ساخت دکمه رفتن به بالا مهم نیست، زیرا عنصر انکر ما فاقد ویژگی href است و به هر حال ما را به صفحه جدیدی نمی برد، اما همیشه بهتر است دوباره بررسی شود.

.animate()

متد jQuery .animate () روشی است که کل ترفند را انجام می دهد.

$('html, body'). animate({scrollTop:0}, 
 '300');

اولین پارامتر متد.animate () لیست خصوصیاتی است که باید متحرک سازی کنیم.  ویژگی ما scrollTop نام دارد و می‌خواهیم مقدار آن 0 باشد. نوع این پارامتر شیء ساده است و به همین دلیل باید از آکولاد استفاده کنیم و مقادیر خود را با استفاده از جفت کلید مقدار سینتکس یادداشت کنیم.

پارامتر دوم سرعتی است که می خواهیم انیمیشن ما با آن اجرا شود. بر حسب میلی ثانیه اندازه گیری می شود و هرچه این عدد بیشتر باشد انیمیشن کندتر می شود. پیشفرضش 400 هست ولی می توانیم به 300 تغییر دهیم.

در نهایت، ما متد متحرک را برای عناصر HTML و بدنه در صفحه وب خود اعمال می کنیم.

حالا ساخت دکمه رفتن به بالا تمام شد و هر بار که روی دکمه کلیک می کنیم، ما را به بالای صفحه می برد.

جمع‌بندی کلی

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

همچنین می‌توانید مقالات آموزشی کدنویسی و برنامه‌نویسی در نیترو وردپرس را مطالعه نمایید.

میتونی برای مشاهده ویدیوهای آموزشی روزانه به پیج اینستاگرام یا کانال تلگرام نیترو وردپرس سر بزنی!

تیم تولید محتوا
ما در تیم تولید محتوای نیترو وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و طراحی تا مدیریت وبسایت را برای شما فراهم کنیم.

نظر شما در این باره چیست؟

0 نظر در مورد نحوه ساخت دکمه رفتن به بالا صفحه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.