ساخت 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 در جاوا اسکریپت
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<a href="#" onclick="window.scroll(0, 0); return false;">رفتن به بالای صفحه</a> <a href="JavaScript:void(0);" onclick="window.scroll(0, 0); return false;">رفتن به بالای صفحه</a> !DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> | رفتن به بالای صفحه با لینک ساده و جاوا اسکریپت</title> <!--.************ --> <style type="text/css"> body{ font-family: Tahoma, Geneva, sans-serif; font-size: 12px; direction: rtl; } .block{ display: block; height: 1500px; width: 80%; color: #FFFFFF; background-color: #9A2F99; border:1px solid #5D055F; clear: both; padding: 4px; margin-left: auto; margin-right: auto; } a{ text-decoration:none; } </style> </head> <body> <noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript> <div id="block" class="block">برای تست کد، به پائین صفحه اسکرول کنید!</div> <a href="JavaScript:void(0);" onclick="window.scroll(0, 0); return false;">↑ رفتن به بالای صفحه - روش JavaScript:void</a> <br> <br> <a href="#" onclick="window.scroll(0, 0); return false;">↑ رفتن به بالای صفحه - روش آی دی خالی</a> <br> <br> <a href="#block" onclick="window.scroll(0, 0); return false;">↑ رفتن به بالای صفحه - روش ترکیبی</a> <hr> |
</body>
</html>
توضیح مشخصی در خصوص کدهای نوشته شده ارائه می کنیم:
در نظر داشته باشید که هر دو سری کدی که در بالا نوشته شده است دارای کاربردی مشابه هستند و تنها تفاوتی که وجود دارد نمایش عبارت است که در زمان کلیک کاربر صورت می گیرد.
به کد اول نگاه کنید در اینجا از پارامتر href استفاده کردیم و یک مقدار # برای آن قرار دادیم، مشخص است که در این بخش قرار است ارجاع به یک آی دی خالی صورت بگیرد و لینک نهایی غیر واقعی است.
در کد دوم این کار توسط جاوا اسکریپت صورت گرفت به طوری که از viod به معنی پوچ استفاده شده است و برای زمانی که نیازی به عملیات مشخصی توسط مفسر نباشد مورد استفاده قرار می گیرد.
از متد کاربردی و مشهور window.scroll استفاده شد و مشخصه onclick برای آن به کار رفت به طوری که با یک بار کلیک کاربر به سادگی مقدار صفر برای x و همینطور برای y در نظر گرفته شود و به مرورگر فرستاده شود.
به نظر می رسد کار کمی سخت شده است؟
نگران نباشید در واقع وجود مقدار صفر برای دو محور x و y به معنی همان بالای صفحه است. به همین سادگی!
بخش دیگری در کد اعمال شده است که در واقع به صورت return false نمایش داده می شود، این گزینه سبب می شود که حال پیش فرض برای مرورگرها غیر فعال شود. به صورتی که مرورگر از مقادیری که ما به آن برای لینک داده ایم استفاده نماید و کاربر به آدرس صحیحی هدایت شود. در نظر داشته باشید که این بخش از کد نویسی بسیار مهم است.
Scroll to top در جاوا اسکریپت با افکت اسکرول
شما می توانید خودتان دست به کار شده و یک تابع بنویسید که علاوه بر Scroll to top در جاوا اسکریپت بتواند یک جلوه زیبا نیز به اسکرول شما ببخشد. البته همه چیز اختیاری است اما ایجاد جلوه های نمایشی زیبا قطعاً بر روی کاربر بسیار تأثیر گذار خواهد بود.
قطعه کد زیر را یک دوره اجرا بگیرید تا متوجه تأثیر Scroll to top در جاوا اسکریپت با استفاده از افکت های زیبا شوید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<script type="text/javascript"> function currentYPosition(){ //Firefox, Chrome, Opera, Safari if(self.pageYOffset){ return self.pageYOffset; } //Internet Explorer 6 if(document.documentElement && document.documentElement.scrollTop){ return document.documentElement.scrollTop; } //Internet Explorer 6, 7 and 8 if(document.body.scrollTop){ return document.body.scrollTop; } return 0; } function elmYPosition(id){ var elm = document.getElementById(id); var y = elm.offsetTop; var node = elm; while(node.offsetParent && node.offsetParent != document.body){ node = node.offsetParent; y += node.offsetTop; } return y; } function smoothScroll(id) { var startY = currentYPosition(); var stopY = elmYPosition(id); var distance = stopY > startY ? stopY - startY : startY - stopY; if(distance < 100){ scrollTo(0, stopY); return; } var speed = Math.round(distance / 100); if(speed >= 20){ speed = 20; } var step = Math.round(distance / 25); var leapY = stopY > startY ? startY + step : startY - step; var timer = 0; if(stopY > startY){ for(var i = startY; i < stopY; i += step){ setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); leapY += step; if(leapY > stopY){ leapY = stopY; timer++; } } return; } for(var i = startY; i > stopY; i -= step) { setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); leapY -= step; if(leapY < stopY){ leapY = stopY; timer++; } } } </script> |
منبع : طراحی سایت