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

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

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

این دکمه را می‌توان در سایت های وردپرسی توسط افزونه هایی نیز پیاده سازی کرد اما اگر خودتان علاقمند به طراحی هستید می‌توانید توسط چند خط کد ساده با 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 خط کد ( در مجموع ) یک دکمه اسکرول به بالا برای سایت خودتان طراحی کنید . حتی اگر سایت شما وردپرسی است و با کدنویسی آشنایی دارید ، می‌توانید به همین ترتیب بدون نیاز به نصب هیچ افزونه خاصی که وب سایت شما را سنگین کند ، یک دکمه شیک و دقیق جهت بازگشت به بالا در سایتتان داشته باشید .