جمعه 3 آذر 1396 |  عضویت / ورود






[ بخش اصلی آموزشها | افزودن آموزش | داری بیشترین امتیاز | دارای بیشترین بیننده | جدیدترین نظرات ]

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



این آموزش مربوط است به موضوع طراحي صفحات وب که توسط Hamid در تاریخ: Saturday, 2016 October 15 ارسال شده است.   |   تعداد بازدید: 1706 بار   |   امتیاز متوسط: امتیازی داده نشده است


----------------------------------

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

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

 

همین!

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

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





ارسال سؤال یا نظر
Tutorials ©