Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
نحوه ایجاد دکمه رفتن به بالای صفحه (go to top) با جاوا اسکریپت
یکی از کاربردهای جاوا اسکریپت (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 به خودی خود به آن مقادیر ترتیب اثر نمی دهند (مگر اینکه از دستور جاوا اسکریپتی در آن استفاده شده باشد).

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


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

پیش نمایش



1394/05/30 9:48:42 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما