بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
دوره جدید " شاهکار تولید محتوا " برای علاقمندان به سئو ، جزئیات دوره

ساخت دکمه رفتن به بالای صفحه با جی کوئری

مقالات طراحی سایت

تنها با چندخط کد می‌توانید یک دکمه بازگشت به بالای سایت را برای تمامی وب سایت های خود طراحی و کدنویسی کنید ! در این مقاله با کوتاه ترین حالت ممکن در کدنویسی ، ساخت این دکمه را یاد خواهید گرفت .

0 32
ساخت دکمه رفتن به بالای صفحه با جی کوئری

یکی از المان‌های جذاب در داخل هر وب سایتی می‌تواند دکمه بازگشت به بالا باشد . این دکمه خصوصا در حالت موبایل بسیار کاربردی است . زمانی که اسکرول صفحه شما بسیار بلند و طولانی باشد ، در داخل دستگاه موبایل ، شما برای بازگشت به ابتدای صفحه باید مقدار زیادی اسکرول انجام دهید تا مجدد به اول صفحه بازگردید .

در برخی از وب سایت ها زمانی که شما کمی به سمت پایین اسکرول کنید ، در سمت چپ یا راست در انتهای صفحه یک دکمه ظاهر می‌شود که با کلیک روی آن ، به یکباره به ابتدای صفحه جهش خواهید کرد .

این دکمه را می‌توان در سایت های وردپرسی توسط افزونه هایی نیز پیاده سازی کرد اما اگر خودتان علاقمند به طراحی هستید می‌توانید توسط چند خط کد ساده با html و css و البته کمی جی‌کوئری این دکمه را برای سایت خودتان بسازید .

برای ساخت دکمه رفتن به بالای صفحه با جی کوئری ابتدا باید یک دکمه با html بسازیم ، سپس آن را با css دیزاین کنیم و سپس توسط jQuery و توسط دستورات scrollTop ، click و animate عملکرد نمایش و حرکتی آن را ایجاد کنیم .

اصول ساخت دکمه رفتن به بالای صفحه ( scroll to top )

برای ساخت چنین دکمه‌ای باید چند قانون ساده را درنظر داشته باشید . اول اینکه باید درنظر بگیرید که کاربر شما نباید از همان ابتدا دکمه اسکرول به بالا را مشاهده کند و زمانی که کمی پایین‌تر رفت این دکمه برای او ظاهر شود . برای مثال وقتی 1000 پیکسل از ابتدای صفحه به سمت پایین اسکرول شد ، این دکمه ظاهر شود . پس اولین قانون ، نمایش این دکمه در زمان مناسب است . پوزیشن این دکمه باید درحالت fix باشد یعنی در انتهای صفحه به شکل ثابت بوده و حرکت نکند که توسط css باید آن را انجام دهیم .

گزینه دوم اینجاست که وقتی کاربر روی این دکمه کلیک کرد ، با یک افکت انیمیشنی و در مدت زمانی مشخص مثل 1 تا نهایتا 2 ثانیه به ابتدای صفحه بازگردد .

مورد بعدی اینجاست که وقتی کاربر روی دکمه کلیک کرد و به ابتدای صفحه بازگشت ، دیگر دکمه نمایش داده نشود و مجدد زمانی که کاربر به اندازه اسکرول مشخص شده پایین‌تر رفت ، دوباره این دکمه ظاهر شود . پس باید 3 اصل را درکل مدنظر داشته باشیم .

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

<span class="scrolltop"><i class="bi bi-arrow-up-short"></i></span>

در این کد صرفا یک تگ span با کلاس scrolltop که برای استایل دهی استفاده خواهیم کرد به همراه  یک آیکون که در داخل آن قرار گرفته است وجود دارد . اکنون باید استایل نویسی این دکمه را انجام دهیم که این بخش نیز تماما بستگی به سلیقه شما دارد . کدی که ما نوشتیم به شکل زیر است :

.scrolltop{
	display:inline-block;
	position:fixed;
	width:50px;
	height:50px;
	text-align:center;
	line-height:50px;
	font-size:22px;
	bottom:20px;
	left:20px;
	z-index:3;
	border-radius:6px;
	background-color:#222;
	color:#faf4f4;
}

توجه کنید که اگر قصد دارید تا داخل دکمه یک متن مثل ” بازگشت به بالا ” بنویسید ، باید دستور خودتان را به شکل زیر تغییر داده و عرض و ارتفاع ثابت را حذف کنید :

.scrolltop{
	display:inline-block;
	position:fixed;
	text-align:center;
	font-size:16px;
	padding:8px;
	bottom:20px;
	left:20px;
	z-index:3;
	border-radius:6px;
	background-color:#222;
	color:#faf4f4;
}

پس می‌توانید هم در داخل دکمه خودتان یک آیکون قرار دهید و هم از یک متن ساده استفاده کنید . رنگ پس زمینه ، متن و سایر استایل‌ها را نیز می‌توانید خودتان به دلخواه تغییر دهید .

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

.scrolltop{ 
	display:none; 
}

با اضافه کردن این کد به ادامه دستورات بالا ، دکمه شما دیگر در داخل صفحه نمایش داده نخواهد شد . اکنون باید یک قطعه کد جی‌کوئری بنویسیم که اول از همه وضعیت نمایش یا عدم نمایش دکمه را مشخص کند . قصد داریم تا اگر اسکرول صفحه از بالا به مقدار 1000 پیکسل شد ، دکمه ظاهر شود پس باید قطعه کد زیر را در انتهای فایل html خودتان و قبل از بسته شدن تگ body و یا در داخل یک فایل با پسوند js قرار دهید . ما تصور می‌کنیم که شما این دستور را در انتهای فایل index.html و قبل از تگ بسته body به شکل زیر قرار می‌دهید . ( حتما دقت داشته باشید که باید کتابخانه اصلی jQuery قبل از دستور زیر در داخل صفحه شما آدرس دهی شده باشد تا کد شما قابلیت اجرا داشته باشد )

<script>
jQuery(window).scroll(function(){
    if(jQuery(this).scrollTop() > 1000){
    jQuery('.scrolltop').fadeIn();
    }
    else{
        jQuery('.scrolltop').fadeOut();
    }
    });
    jQuery('.scrolltop').click(function(){
        jQuery('body,html').animate({scrollTop:0},1000);
    return false;
});		
</script>

در این قطعه کد ، دقت داشته باشید که ابتدا توسط ویژگی scrollTop برای window یا همان پنجره اصلی یک بررسی انجام دادیم و گفتیم که اگر این پنجره (this) که داخل آن هستیم ، ویژگی scrollTop آن از عدد 1000 بیشتر شد ، در این شرایط المانی که کلاس scrollTop دارد و همان دکمه ما خواهد بود توسط افکت fadeIn در صفحه ظاهر شود و در غیر اینصورت ( یعنی اگر مقدار اسکرول از بالا از عدد 1000 بیشتر نبود ) این دکمه توسط افکت fadeOut از صفحه محو شود .

سپس در ادامه کد به سراغ نوشتن کد کلیک و بازگشت به بالا رفتیم . برای المانی که کلاس scrollTop دارد در هنگام رویداد کلیک دستوری نوشتیم که کل تگ body و html در مورد خصوصیت scrollTop ، به کمک یک دستور animate در مدت زمان 1000 میلی ثانیه ( یا همان 1 ثانیه ) به عدد 0 برسد که نتیجه آن جهش صفحه به سمت بالا و بازگشت به ابتدای صفحه خواهد بود .

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

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

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

شاید این مطالب نیز برای شما جالب باشد

تحریم فری پیک تحریم فری پیک ( Freepik ) هم صدرصد شد . در طراحی یک سایت بسیار زیبا و کاربر پسند استفاده از تصاویر مناسب و زیبا که متناسب با رنگ و موضوع سایت باشد یکی از مهم ترین عوامل است و همواره طراحی یک تصویر مناسب نیاز به خلاقیت هنری بالایی دارد و […]

3 4,102

چگونه میتوانیم با پرداخت فقط 500 هزار تومان یک وب سایت برای کسب و کار خودمان داشته باشیم ؟ برای طراحی سایت 500 هزار تومان کافیست یا نه ؟ سیر تا پیاز طراحی سایت های ارزان را در این مقاله مطالعه کنید !

4 375
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود
کانال آپارات سئو نود چنل یوتیوب سئو نود