وب

ساخت Scroll to top در جاوا اسکریپت

آیا می دانید  Scroll to top در جاوا اسکریپت یکی از ترفندهای بسیار کاربردی برای زیباسازی رابط کاربری است؟

ساخت دکمه های کنترلی به طور کلی بخش جدانشدنی رابط کاربری محسوب می شود. برای ساخت Scroll to top در جاوا اسکریپت نیاز است که در ابتدا یک سری قوانین را به درستی اعمال نمایید. دکمه Scroll to top در جاوا اسکریپت و یا دکمه رفتن به بالای صفحه از دسته دکمه های بسیار پرکاربرد محسوب می شود. در این مقاله قصد داریم کدنویسی Scroll to top در جاوا اسکریپت را توضیح دهیم، البته کدهای نوشته شده بسیار ساده و کاربردی هستند و اصلاً از کدهای پیچیده برای شروع استفاده نکرده ایم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

ویژگی های Scroll to top در جاوا اسکریپت

به طور کلی طراحان وب سایت برای زیباسازی و همینطور قالب بندی های منظم تر سعی می کنند به سراغ قابلیت های ساخت دکمه های کنترلی بروند و بررسی ها نشان داده است که کاربران بسیار علاقمند استفاده از دکمه های کنترلی هستند. یکی از پرکاربردترین دکمه هایی که در سایت ها استفاده می شود دکمه اسکرول به بالا یا همان Scroll to top در جاوا اسکریپت است که در واقع قرار است در گوشه پایین نمایشگر به طور دقیق مشخص باشد و اگر سایت دارای ارتفاع خیلی زیاد است این گزینه بسیار مفید و کاربردی می باشد.

Scroll to top در جاوا اسکریپت

Scroll to top در جاوا اسکریپت با استفاده از لینک

یکی از روش های بسیار جالب در زمینه Scroll to top در جاوا اسکریپت استفاده از تگ a است، در نظر داشته باشید که همیشه برای ایجاد لینک ارجاع به بالایی صفحه نیازی به تعریف آی دی نخواهد بود و ما می توانید از دستور پر کاربرد window.scroll استفاده نماییم. در نظر داشته باشید که به طور کلی در جاوا اسکریپت یک سری حالت های مشابه نیز وجود دارد که می تواند کار را آسانتر نماید. این موضوع برای زمانی که به هر دلیل تمایلی به استفاده از آی دی نداریم بسیار مناسب است. در متد موجود که در قطعه کد زیر نیز دیده می شود دو آرگیومنت وجود دارد که برای تعیین مختصات استفاده می شود به طوری که عدد اول در مسیر محور xها بوده و عدد دوم برای محور yها استفاده می شود.

Scroll to top در جاوا اسکریپت

کدنویسی Scroll to top در جاوا اسکریپت

اشکال استفاده از روش جاوا اسکریپت این است که اگر این امکان در مرورگر کاربر غیرفعال باشد لینک عمل نخواهد کرد، برای رفع مشکل می توانیم علاوه بر نمایش پیام غیرفعال بودن جاوا اسکریپت، روش آی دی را با این روش ترکیب کنیم!

</body>

</html>

توضیح مشخصی در خصوص کدهای نوشته شده ارائه می کنیم:

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

به کد اول نگاه کنید در اینجا از پارامتر href استفاده کردیم و یک مقدار # برای آن قرار دادیم، مشخص است که در این بخش قرار است ارجاع به یک آی دی خالی صورت بگیرد و لینک نهایی غیر واقعی است.

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

از متد کاربردی و مشهور window.scroll استفاده شد و مشخصه onclick برای آن به کار رفت به طوری که با یک بار کلیک کاربر به سادگی مقدار صفر برای x و همینطور برای y در نظر گرفته شود و به مرورگر فرستاده شود.

به نظر می رسد کار کمی سخت شده است؟

نگران نباشید در واقع وجود مقدار صفر برای دو محور  x و y به معنی همان بالای صفحه است. به همین سادگی!

بخش دیگری در کد اعمال شده است که در واقع به صورت return false نمایش داده می شود، این گزینه سبب می شود که حال پیش فرض برای مرورگرها غیر فعال شود. به صورتی که مرورگر از مقادیری که ما به آن برای لینک داده ایم استفاده نماید و کاربر به آدرس صحیحی هدایت شود. در نظر داشته باشید که این بخش از کد نویسی بسیار مهم است.

Scroll to top در جاوا اسکریپت

Scroll to top در جاوا اسکریپت با افکت اسکرول

شما می توانید خودتان دست به کار شده و یک تابع بنویسید که علاوه بر Scroll to top در جاوا اسکریپت بتواند یک جلوه زیبا نیز به اسکرول شما ببخشد. البته همه چیز اختیاری است اما ایجاد جلوه های نمایشی زیبا قطعاً بر روی کاربر بسیار تأثیر گذار خواهد بود.

قطعه کد زیر را یک دوره اجرا بگیرید تا متوجه تأثیر Scroll to top در جاوا اسکریپت با استفاده از افکت های زیبا شوید.

 

 

منبع : طراحی سایت

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا