دکمه بالا برای وب‌سایت یا وبلاگ شما با کمک جی‌کوئری (jQuery Back to Top button)

یکی از ساده‌ترین و بهترین پیاده‌سازی‌ها برای دکمه «بالا» که با کلیک روی آن با یک انیمیشن زیبا به بالای سایت منتقل شوید در ادامه آمده:

۱- باید جِی‌کوئری در صفحه شما موجود باشد. اگر مطمئنید که موجود نیست، قطعه کد زیر را در بخشی از کد صفحه‌ی خود مثلاً قبل از ‎</body>‎ قرار دهید:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

۲- بعد از آن قطعه کد زیر را قرار دهید:

<a href="#" class="scrollToTop">&#9650;</a>

۳- پس از آن قطعه کد زیر را قرار دهید:

<style>
.scrollToTop{
  width:20px;
  height:20px;
  padding:10px;
  text-align:center;
  background: whiteSmoke;
  font-weight: bold;
  color: #444;
  text-decoration: none;
  position:fixed;
  bottom:75px;
  right:75px;
  display:none;
  /*background: url('arrow_up.png') no-repeat 0px 20px;*/
}
.scrollToTop:hover{
  text-decoration:none;
}
</style>

۴- نهایتاً در ادامه‌ی کدهای بالا، قطعه کد زیر را قرار دهید:

<script>
$(document).ready(function(){
  //Check to see if the window is top if not then display button
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
      $('.scrollToTop').fadeIn();
    } else {
      $('.scrollToTop').fadeOut();
    }
  });
 
  //Click event to scroll to top
  $('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
  });
 
});
</script>

همین!

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

موفق باشید؛
حمید رضا نیرومند