0
ساخت دکمه برگشت به بالای سایت به همراه انیمیشن با jquery
ساخت دکمه برگشت به بالای سایت به همراه انیمیشن با jquery
شاید این روزها هنگام گشت و گذار در اینترنت وب سایت هایی را دیده باشید که یک دکمه در پایین آنها وجود دارد و هنگامی که کاربر صفحه را اسکرول کرده و به پایین وب سایت می رود ، با کلیک روی آن ، صفحه وب آرام و با افکتی زیبا به سمت بالای سایت حرکت میکند و کاربر مجددا" در حالت اولیه بارگزاری سایت قرار میگیرد . بعد از این آموش می توانید با چند خط مختصر توسط CSS و jQuery یک دکمه برگشت به بالا با افکت و به صورت انیمیشنی برای وب سایت خود بسازید.
CSS و طراحی :
یش از ظهور jQuery این دکمه در بعضی وب سایت ها وجود داشت اما وقتی در پایین صفحه روی انها کلیک میکردیم ، ناگهان صفحه به بالا جهش می کرد و هیچ حرکت انیمیشنی که نشان دهد صفحه در حال حرکت به بالاست وجود نداشت .
خوب نوبت به ایجاد این دکمه می رسه در قدم اول مثل همیشه یک صفحه به نام index.html ايجاد كنيد و كدهای زير را درون آن قرار دهيد :
<html> <head> <link rel="stylesheet" href="style.css" type="text/css"/> <script type="text/javascript" src="backtotop.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <title>iranganj</title> </head> <body> <div id="content"> <h1> عنوان </h1> <p> متن شما </p> <div id="back"> بازگشت به بالا </div> </div> </body> </html>
css:
خوب اگه این صفحه رو در مرورگر اینترنت باز کنید و اون رو مشاهده کنید فقط یک متن ساده رو مشاهده می کنید پس باید با استفاده از css شکل ظاهری دکمه رو ایجاد کنیم . صفحه ی جدیدی به نام style.css ایجاد کنید .
برای اینکه دکمه با اسکرول کردن مرورگر در جای خود ثابت باقی بماند و همواره در دسترس باشد ، خاصیت position را برای آن برابر با fixed قرار میدهیم .
کد css به صورت زیر می باشد:
html, body
{
font-family :Tahoma, Arial, Helvetica, sans-serif;
font-size:16px;
color:#333;
height:100%;
text-align:center;
background :#888;
}
#content
{
margin:20px auto 20px auto;
padding:20px;
border:1px solid #333;
width:900px;
height:auto;
background:FFF;
position:relative;
text-align:left;
}
p
{
margin :0px 0px 0px 0px;
padding :5px 0px 10px 0px;
line-height:1.6em;
}
h1
{
margin:0px 0px 0px 0px;
padding:5px 0px 10px 0px;
font-size:30px;
font-weight:normal;
}
#back
{
cursor:pointer;
display:none;
margin:0px 0px 0px 370px;
position:fixed;
bottom:10px;
font-size:90%;
padding:#10px;
width:100px;
text-align:center;
background-color:#000;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
filter:alpha(opacity=60);
-khtml-opacity:0.6;
-moz-opacity:0.6;
opacity:0.6;
color:#FFF;
font-size:14px;
z-index:1000;
}
#back:hover
{
filter:0.9;
-khtml-opacity:0.9;
-moz-opacity:0.9;
opacity:0.9;
}
jQurey:
خوب تا اينجا صفحه ما شكل ظاهری خود رو بدست آورد می تونید اون رو مشاهده کنید. و اما قدم اخر مربوط به كدهای جی کوری ميشود .از اونجایی که می خواهیم هنگام کلیک بر روی دکمه مربوطه با سرعت آهسته به ابتدای صفحه بازگردیم برای ايجاد این انیمیشن باید از جی کوری استفاده کنیم.خوب فایلی به نام backtotop.js ايجاد كنيد.
در زیر کدهای جاوااسکریپت برای ایجاد حرکت با افکت های بصری را مشاهده میکنید . شما میتوانید این کد را در هر کجای صفحه قرار دهید . در ابتدا دکمه مخفی است . توسط کد زیر هنگامی که مقدار اسکرول مرورگر بیشتر از 100 شود ، دکمه به آرامی ظاهر میشود و وقتی کمتر از 100 شود مجددا" دکمه به آرامی مخفی خواهد شد . در بخش دوم این کد تابع کلیک را مشاهده میکنید که باعث میشود با کلیک روی لینک a صفحه به صورت انیمیشنی به بالا برگردد.
کد javascript به صورت زیر می باشد:
$(function (){
$(window).scroll(function (){
if ($(this).scrollTop() != 0) {
$('#back').fadeIn();
} else {
$('#back').fadeOut();
}
});
$('#back').click(function () {
$('body,html').animate({ scrollTop: 0 }, 800);
});
});
نکته:
شما توسط کدهای jQuery و بدون نیاز به اینکه خصیصه id را در تگ body برابر با top قرار دهید می توانید کلیه عملیات فوق را انجام دهید. اما انجام اینکار باعث شد که چنانچه مرورگری به هر دلیلی جاوااسکریپت را پشتیبانی نکند و یا غیر فعال باشد ، دکمه ما به درستی کارش را انجام دهد.
همچنین این سورس کد زمانی اجرا می شود که شما به اینترنت وصل باشید یا این که روی سرور گذاشته باشد.
این مطلب را به اشتراک بگذارید...
نظر / سوال