تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


یکی از کاربردهای جاوا اسکریپت (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>

توضیح:
- کد بالا از سه تابع تشکیل شده که تابع currentYPosition موقعیت کنونی محور y را محاسبه می کند و تابع elmYPosition موقعیت بلاک مقصد را تعیین می کند، در نهایت smoothScroll حالت اسکرولی نرمی از پائین به بالای صفحه ایجاد می نماید.
- سرعت اسکرول در تابع smoothScroll در مقادیر speed قابل دستکاری است که بهتر است این کار را انجام ندهید، مگر اینکه کاملا مسلط باشید.
ایجاد اسکرول به بالای صفحه با توابع جی کئوری (jquery):
هرچند در حالت معمول استفاده زیاد از کتابخانه های جی کئوری را توصیه نمی کنیم (به دلیل حجم بالایی که دارند)، اما ممکن است برای بعضی از کاربران این موضوع چندان مسئله ساز نباشد، لذا جهت آگاهی هم که شده بد نیست نمونه ای از این نوع دکمه های تقریبا هوشمند را با هم مرور کنیم.
در کد زیر ما از فریم ورک (فِرِم وُرک یا Framework در واقع مجموعه ای از توابع و کلاس های یک برنامه را گویند که قابلیت استفاده مجدد در پروژه های متفاوت را دارند، ولی همگی به طور مثال در یک فایل یا بسته گردآوری شده اند) جاوا اسکریپتی جی کئوری (jquery) که در سرور سایت گوگل قرار دارد، استفاده کرده ایم، اگر تمایل دارید که این فریم ورک را روی هاست خود داشته باشید، نسخه ای از آن را نیز جهت دانلود قرار داده ایم:

دانلود فریم ورک جی کئوری (jquery) - نسخه 1.4.3
ابتدا در قسمت هدر سایت خود (بین تگ های <head> و <head/>) کتابخانه جی کئوری را ایمپورت کنید (می توانید از فایل و سرور خود نیز استفاده کنید):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

کد زیر را نیز بعد از آن کپی کنید:


<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
 
});
//]]>
</script>

سپس استایل css زیر را در صفحه خود ایمپورت نمائید یا بین تگ <style> و <style/> کپی کنید (می توانید آن را مطابق سلیقه خود ویرایش نمائید):

 <style type="text/css">
#back-top {
 position: fixed;
 bottom: 10px;
 margin-left: -150px;
}
#back-top a {
 width: 108px;
 display: block;
 text-align: center;
 text-decoration: none;
 color: #bbb;
 /* background color transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover {
 color: #000;
}
/* arrow icon (span tag) */
#back-top span {
 width: 108px;
 height: 108px;
 display: block;
 margin-bottom: 7px;
 background: #ddd url(up-arrow.png) no-repeat center center;
 /* rounded corners */
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 /* background color transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover span {
 background-color: #777;
}
</style>

حال در بالاترین قسمت صفحه بعد از تگ body یک بلاک با آی دی top بسازید، به طور مثال:


<div id="top"></div>

اکنون در پائین ترین قسمت صفحه قبل از تگ <body/> کد زیر را جهت نمایش دکمه قرار دهید:


<p style="display:block;" id="back-top">
<a href="#top"><span></span>رفتن به بالا</a>
</p>


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین