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

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

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

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

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

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

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

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

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

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

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

برویم تا ساخت دکمه رفتن به بالا رو شروع کنیم! ابتدا با ایجاد style و نشانه گذاری برای دکمه خود شروع می کنیم. این قسمت HTML است. کافی است به هاست‌تان بروید و به پوشه اصلی قالب بروید و کد زیر را در ابتدای فایل footer.php یا header.php قرار دهید.

<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 های اولیه برای دکمه به صورت زیر است. پس کد زیر را به فایل style.css در قالب وردپرس خود اضافه کنید. می‌توانید مقاله فایل‌ها و ساختار قالب وردپرسی را مطالعه کنید.

#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 تغییر دهیم تا بتوانیم ابعادی را به آن اختصاص بدهیم. بیایید آن را به یک دکمه مربع ۵۰ * ۵۰  پیکسل با گوشه های گرد ۴ پیکسلی تبدیل کنیم.  ما به آن یک رنگ نارنجی روشن و یک حاشیه ۳۰ پیکسلی هم در هر طرف می دهیم.

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

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

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

در حال حاضر دکمه ما خالی است، پس بیایید یک نماد یا آیکون به آن اضافه کنیم. ما این کار را با اضافه کردن یک after به شناسه css انجام می‌دهیم. پس طبق زیر شماهم این کا را انجام دهید. توجه داشته باشید که اگر Font Awesome را در سایت خود غیرفعال کرده باشید باید به جای استفاده از استایل‌های زیر خودتان یک آیکون به صورت تصویر درج کنید.

#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}, 
    '۳۰۰'); 
       }); 
     }); 
     </script>

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

jQuery(document).ready(function() {

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

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

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

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

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

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 () استفاده می کنیم. هیچ آرگومان نمی گیرد و به سادگی تعدادی پیکسل را که در بالای ناحیه قابل پیمایش پنهان شده اند، برمی گرداند.

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

اگر از ۳۰۰ پیکسل عبور کنیم، یک کلاس show به عنصر دکمه خود اضافه می کنیم که ظاهر آن را نشان می دهد. اگر عدد کمتر از ۳۰۰ باشد، آن کلاس را حذف می کنیم. اضافه کردن و حذف کلاس ها دلیل دیگری برای محبوبیت جی کوئری در ساخت دکمه رفتن به بالا است. ما می توانیم این کار را با دو روش ساده 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 که تنظیم شده روی ۰.۵ ثانیه.

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

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

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

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

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

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

.animate()

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

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

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

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

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

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

جمع‌بندی کلی

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

اگر دوست داشتید می‌توانید دوره آموزش رایگان سریع و ساده Html و Css را مشاهده کنید.