ساخت دکمه برگشت به بالای سایت همراه انیمیشن

شاید این روزها هنگام گشت و گذار در اینترنت وب سایت هایی را دیده باشید که یک دکمه در پایین آنها وجود دارد و هنگامی که کاربر صفحه را اسکرول کرده و به پایین وب سایت می رود ، با کلیک روی آن ، صفحه وب آرام و با افکتی زیبا به سمت بالای سایت حرکت میکند و کاربر مجددا" در حالت اولیه بارگزاری سایت قرار میگیرد . بعد از این آموش می توانید با چند خط مختصر توسط CSS و jQuery یک دکمه برگشت به بالا با افکت و به صورت انیمیشنی برای وب سایت خود بسازید.

● مشاهده دمو
● دانلود سورس

CSS و طراحی

پیش از ظهور jQuery این دکمه در بعضی وب سایت ها وجود داشت اما وقتی در پایین صفحه روی انها کلیک میکردیم ، ناگهان صفحه به بالا جهش می کرد و هیچ حرکت انیمیشنی که نشان دهد صفحه در حال حرکت به بالاست وجود نداشت .
● مشاهده دکمه حرکت به بالا ( پیش از ظهور jQuery )

همانطور که ملاحظه میکنید اینکار به تنهایی توسط دستورات HTML و بدون نیاز به jQuery قابل انجام است اما با اضافه کردن چند خط کد jQuery یک دکمه مدرن و امروزی خواهیم داشت . برای شروع یک عنصر HTML مثلا p تعریف کرده و خصیصه id آنرا برابر با back-top قرار دهید . این عنصر دکمه را در بر میگیرد. سپس یک عنصر a داخل آن تعریف کرده و خصیصه id این عنصر جدید را برابر با top# قرار دهید . داخل عنصر a یک تگ span تـعریف کنید.تصویر یک فلِش به جهت بالا که در روی دکمه نمایان میشود توسط همین عنصر span نمایش داده میشود که در در کدهای CSS برای آن مشخص خواهیم کرد . این عنصر span اختیاری است و شما میتوانید به جای تصویر با یک عبارت کاربر را برای رفتن به بالای سایت راهنمایی کنید . بعد از عنصر span عبارتی را که میخواهید نشان داده شود بنویسید . حالا کد HTML دکمه شما به اینصورت است :

برگشت به بالا


همانطور که مشاهده میکنید عنصر a در کد بالا لینکی است به عنصری در بالای صفحه که id آنرا برابر با top قرار داده ایم . این عنصر باید در بالاترین قسمت صفحه باشد . بنابراین ما تگ body را به عنوان بالاترین عنصر در صفحه در نظر میگیریم و خصیصه id را برای آن برابر با top قرار میدهیم .


آموزش ساخت دکمه رفتن به بالای صفحه


کدهای CSS برای دکمه برگشت به بالا را در زیر مشاهده میکنید . برای اینکه دکمه با اسکرول کردن مرورگر در جای خود ثابت باقی بماند و همواره در دسترس باشد ، خاصیت position را برای آن برابر با fixed قرار میدهیم .

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

بخش jQuery

در زیر کدهای جاوااسکریپت برای ایجاد حرکت با افکت های بصری را مشاهده میکنید . شما میتوانید این کد را در هر کجای صفحه قرار دهید . در ابتدا دکمه مخفی است . توسط کد زیر هنگامی که مقدار اسکرول مرورگر بیشتر از 100 شود ، دکمه به آرامی ظاهر میشود و وقتی کمتر از 100 شود مجددا" دکمه به آرامی مخفی خواهد شد . در بخش دوم این کد تابع کلیک را مشاهده میکنید که باعث میشود با کلیک روی لینک a صفحه به صورت انیمیشنی به بالا برگردد.





نکته : شما توسط کدهای jQuery و بدون نیاز به اینکه خصیصه id را در تگ body برابر با top قرار دهید می توانید کلیه عملیات فوق را انجام دهید. اما انجام اینکار باعث شد که چنانچه مرورگری به هر دلیلی جاوااسکریپت را پشتیبانی نکند و یا غیر فعال باشد ، دکمه ما به درستی کارش را انجام دهد.

نظرات (17) -

  • meray

    02/22/1390 12:10:37 ق.ظ | پاسخ به این نظر

    سلام کدای بخش jQueryرو تو سایتم گذاشتم ولی کار نمیکنه.ممنون ا ز سایتتون

    • Admin

      02/22/1390 12:59:22 ق.ظ | پاسخ به این نظر

      سلام meray عزیز ، من کدهای سایت شما رو نگاه کردم ، شما باید علاوه بر کد jQuery کدهای CSS و HTML رو هم در کدهای سایتتون بزارید . برای اینکه راحت تر متوجه بشوید که چه کدهایی رو کجا باید بزارید ، به صفحه دمو این آموزش که لینکش در ابتدای پست هست برید ، راست کلیک کنید و view source رو بزنید ، کدهایی که در این ارسال در بخش HTML و CSS توضیح دادم رو در سورس دمو که باز شده پیدا کنید . بعد درست مثل همون کدهای CSS و HTML رو هم به کدهای صفحه خودتون اضافه کنید و همچنین تصویر دکمه مورد نظر رو هم از سورس برنامه که آماده دانلود هست بردارید و در کنار همون فایل صفحه تون کپی کنید .

      امیدوارم با این راهنمایی زودتر این دکمه رو به سایت خوبتون اضافه کنید ...

  • meray

    02/25/1390 12:03:12 ق.ظ | پاسخ به این نظر

    سلام مرسی از راهنماییتون ولی وقتی کد رو در قالب وی سی پی میزارم میگه خطای وجود کاراکتر توضیحاتی.بازم از پاسخگویی شما بسیار ممنونم.

  • Admin

    02/25/1390 08:34:52 ق.ظ | پاسخ به این نظر

    احتمالا" کدها رو در جایی که نباید و طوری کپی میکنید که یک تگ باز می مونه و کاراکترهای اضافی محسوب میشه. همانطور ملاحظه میکنید که دموی این آموزش بدون هیچ مشکلی در حال کار کردنه.

  • زارع

    08/13/1390 10:34:58 ق.ظ | پاسخ به این نظر

    با سلام
    دوست عزیز من یه همچین دکمه ای تو سایتم دارم اما ثابته و جی کوری نداره چطور میتونم اینجوری خوشکلش کنم

    • Admin

      08/13/1390 10:59:14 ق.ظ | پاسخ به این نظر

      سلام جناب زارع

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

  • firooz

    09/23/1390 06:12:34 ب.ظ | پاسخ به این نظر

    با سلام و خسته نباشید'چطور تو فلش یه دکمه با پس زمینه انیمشن یا فیلم درست کنم '

    • Admin

      09/23/1390 07:42:40 ب.ظ | پاسخ به این نظر

      سلام فیروز جان
      متاسفانه من سال ها پیش فلش کار کردم و هیچوقت در وب از فلش بخاطر مشکلاتش  استفاده نمیکنم. شما میتونید برای کارهایی در حد یک دکمه، با نرم افزار swish max به سادگی دکمه های انیمیشنی درست کنید. در این نرم افزار همه چیز آماده و قابل درک هست و با کمی تمرین افکت های خوبی رو میتونید ایجاد کنید. بعد می تونید با فرمت gif ذخیره کنید و در پس زمینه یک دکمه یا لینک از نوع HTML و یا با فرمت swf مستقیما با لینکی که در برنامه براش تعیین میکنید، در صفحه وب استفاده کنید.

  • milad.sh

    10/01/1390 12:37:06 ب.ظ | پاسخ به این نظر

    ممنون از اين كه اين طور به برنامه نويساي وب سايت كمك ميكنيد تا به يه سايت زيبا برسند. با تشكر...

  • jamshidi

    11/10/1390 12:22:17 ب.ظ | پاسخ به این نظر

    سلام دوستان، من می خوام توی textBox وقتی کلیک می کنیم یا به فرض شماره موبایلی که وارد شده، هر شماره موبایل استایل دکمه بگیره مثل قسمت TO در ایمیل یاهو که وقتی ایمیل هامون رو وارد می کنیم استایل دکمه می گیرند آیا کسی می تونه راهنماییم کنه یا یک سایت معرفی کنه؟ متشکرم

    • Admin

      11/14/1390 12:54:55 ب.ظ | پاسخ به این نظر

      جناب جمشیدی اینکارو تاحالا نکردم، یه بررسی می کنم به نتیجه رسیدم بهتون اطلاع میدم...

  • تالیا

    12/20/1390 01:09:03 ب.ظ | پاسخ به این نظر

    با سلام و خسته نباشید خدمت شما مدیر محترم
    ببخشید یه سوالهای دارم که اگه جواب بدید ممنون میشم
    من میخوام ازcss در ویژوال استودیو استفاده کنم
    برای گرد کردن یک عکس،مثلا برای هدر سایت از چه کدی استفاده کنم؟
    گوشه هاش یه ذره گرد بشن!
    سوال بعدی اینکه کدهای جاوا اسکریپت رو در ویژوال استودیو کجابنویسیم بهتره؟جاوا اسکریپت رو خیلی بلد نیستم برای یادگیری کاملش از کجا شروع کنم واز چه منبعی؟
    مرسی

  • علی

    08/15/1393 09:32:41 ب.ظ | پاسخ به این نظر

    اگه نخوایم عکس داشته باشه چیکار باید بکنیم ؟
    یعنی به جای  عکس  ،  یه جا تو سایت یه دکمه داشته باشیم با کلیک روی اون این عمل انجام بشه !!!

  • مسگری

    08/22/1393 09:24:39 ق.ظ | پاسخ به این نظر

    باسلام
    در صورت امکان کاربرد کد زیر رو توضیح بدین که چی هست و چرا بهش لینک دادین
    ajax.googleapis.com/.../jquery.min.js
    بعضی از سایتها وقتی اسکرول بار به قصمتی از صفحه میرسه یک div یا منویی رو مخفی یا نمایش میدن کد فوق رو میشه با دستکاری کردن به همین منظور استفاده کرد؟(اون تکه کد بالا تو این کار تاثیری داره یا نه)

  • محمد

    08/28/1393 05:31:59 ب.ظ | پاسخ به این نظر

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

  • امیر حسین

    10/06/1393 08:38:06 ب.ظ | پاسخ به این نظر

    با سلام ممنون از کدتون ولی یکم مشکل داشت که پیداش کردم . بعد از وارد کردن نام آی دی یک فاصله گذاشتید که این امر نمی ذاره تا جی کوئری کار کنه با تشکر

    <p id="back-top ">

    www.moharam-khalkhal.ir

Loading