• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

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

S

sky boy

متخصص بخش برنامه نویسی


یکی از کاربردهای جاوا اسکریپت (javascript) در صفحات وب، امکان ایجاد دکمه های کنترلی برای راحتی هر چه بیشتر کاربران،
مخصوصا در مرور صفحاتی است که ارتفاع زیادی دارند، از طرفی برخی از طراحان وب علاقمندند که به جهت زیباتر شدن قالبهایشان از این نوع تکنیک ها استفاده نمایند؛
اگر چه برخی ترجیح می دهند از توابع و کتابخانه های جی کئوری (jquery) به جای توابع ساده جاوا اسکریپت بدین منظور استفاده کنند
اما متاسفانه معمولا حاصل کار ایجاد صفحاتی حجیم و در نهایت کندی بارگذاری سایت یا وبلاگ و افزایش استفاده از پهنای باند سرور است؛

ایجاد لینک ساده رفتن به بالای صفحه با جاوا اسکریپت:

اگر می خواهید از این قابلیت تنها برای هدایت کاربر به بالای صفحه استفاده کنید و افکت و جلوه های ویژه برایتان اهمیتی ندارد،
کافی است از window.scroll در جاوا اسکریپت استفاده نمائید، به دو شکل زیر این کار میسر است که البته فرق چندانی با هم ندارند.

کد: 
<a href="#" onclick="window.scroll(); return false">رفتن به بالای صفحه</a>
<a href="JavaScript:void(0);" onclick="window.scroll(0,0); return false">رفتن به بالای صفحه</a>

توضیح:
- هر دو کد بالا کارکردی شبیه به هم دارند و انتخاب یک حالت اختیاری است.
- کد اول با مقادیر href برابر #، نشان دهنده این است که لینک ما در واقع یک لینک واقعی نیست و لذا توسط ربات های جستجوگر دنبال نخواهد شد؛
همین کار در کد دوم با استفاده از JavaScript:void و مقادیر صفر انجام شده است.
- متد window.scroll با رویداد onclick (یک بار کلیک کاربر) مقادیر x برابر صفر و y برابر صفر را به مرورگر می دهد (نقطه صفر از محور x و y که در واقع همان بالای صفحه است).
- return false برای غیر فعال کردن حالت طبیعی یک لینک است، در حالت معمول مرورگرها از مقادیر href لینک ها پیروی می کنند،
اما با قرار دادن return false به خودی خود به آن مقادیر ترتیب اثر نمی دهند (مگر اینکه از دستور جاوا اسکریپتی در آن استفاده شده باشد).



 
S

sky boy

متخصص بخش برنامه نویسی

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

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

کد: 
<script type="text/javascript">
//<![CDATA[
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(eID) {
 var elm = document.getElementById(eID);
 var y = elm.offsetTop;
 var node = elm;
 while (node.offsetParent && node.offsetParent != document.body) {
 node = node.offsetParent;
 y += node.offsetTop;
 } return y;
}
function smoothScroll(eID) {
 var startY = currentYPosition();
 var stopY = elmYPosition(eID);
 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>

سپس در بالای صفحه خود بعد از تگ body یک بلاک با آی دی دلخواه بسازید، مثلا:

کد: 
<div id="blockid"></div>

در پائین صفحه خود لینک یا دکمه ای بسازید و با مقادیر زیر به آن لینک دهید:

کد: 
<a href="#blockid" onclick="smoothScroll('blockid'); return false">رفتن به بالای صفحه</a>

توضیح:
- کد بالا از سه تابع تشکیل شده که تابع currentYPosition موقعیت کنونی محور y را محاسبه می کند و تابع elmYPosition موقعیت بلاک مقصد را تعیین می کند،
در نهایت smoothScroll حالت اسکرولی نرمی از پائین به بالای صفحه ایجاد می نماید.
- سرعت اسکرول در تابع smoothScroll در مقادیر speed قابل دستکاری است که بهتر است این کار را انجام ندهید، مگر اینکه کاملا مسلط باشید.


 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا