ساخت دکمه برگشت به بالای سایت به همراه انیمیشن با jquery
0 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 قرار دهید می توانید کلیه عملیات فوق را انجام دهید. اما انجام اینکار باعث شد که چنانچه مرورگری به هر دلیلی جاوااسکریپت را پشتیبانی نکند و یا غیر فعال باشد ، دکمه ما به درستی کارش را انجام دهد.

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

دانلود

نویسنده حسین فتحی
گروه مطلب Jquery
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۹ دی ۱۳۹۲
منبع ایران گنج
تعداد نظرات ۲
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

تعداد نظرات : ۲

  • ایران

    با سلام واخترام 

    آموزشهای asp,mvc واقعا عالی بود تشکر میکنم اگه میشه آموزشهای php هم مثل این دو باشه خیلی ممنون میشم چون من فیلماشو دانلود کرد اصلا کیفیتش خوب نیست وفقط 3فایلش باز میشد بقیه را ارور میده واگه به سبک بقیه فیلمها باشه خیلی عالیه واینکه مثل asp,mvc آموزش طراخی سایت با phpهم بطور کامل آموزش بدید وسوال دیگه چه نرم افزاری را برای php باید نصب کنیم وممنون مشم اگه ادامه اموزش mvc  را هم آپ کنید 

    با تشکر فراوان ازمطالب خوبتون 

    پاسخ
    • مدیر

      با سلام و درود به شما کاربر گرامی

      آموزش های php با کیفیت خوب  و مناسبی می باشند و فایل ها هیچ مشکلی ندارد.

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

      برای کار با php از نرم افزار Dreamweaver و برای کار با دیتابیس از wamp استفاده کنید.

      پاسخ

این صفحه را می‌پسندم