دکمه بالا برای وبسایت یا وبلاگ شما با کمک جیکوئری (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">▲</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>
همین!
اگر مراحل را درست طی کرده باشید، باید یک آیکون فِلش در سمت راست، پایین صفحه دیده شود که با کلیک روی آن به بالا منتقل شوید.
موفق باشید؛
حمید رضا نیرومند
.
- مطالب مرتبط:
- طریقه ثبت یك سایت در موتورهای جستجو
- آموزش ویدئویی ارسال یک پست در وردپرس به طور کامل (wordpress post)
- مرجع كامل كد HTML رنگ ها (کد شش رقمی رنگ ها)
- ارتباط نام سایت و رتبه آن در موتورهای جستجو
- روان شناسی رنگ ها در طراحی صفحات وب
- كد نمایش آنلاین بودن مدیر سایت، در یاهو مسنجر
- ------------
- ساخت دکمه Mute برای پروژههای فلش (Mute Button in Adobe Flash)
- آموزش ساخت دکمههای وب دوئی در فتوشاپ (How to create Web 2 Buttons in Photoshop)
- آموزش غیرفعال کردن AutoComplete (پر شدن خودکار) در فرمهای تحت وب
- چگونه از یک table با کمک jQuery خروجی CSV (اکسل) بگیریم؟
- آموزش ساخت Infobar (نوار پیغام) در بالای وبلاگ و وبسایت
ارسال سؤال یا نظر