parsgreen.com
article

نحوه ایجاد دکمه رفتن به بالای صفحه (go to top) با جاوا اسکریپت

javascript-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>
پیش نمایش
توضیح:
- کد بالا از سه تابع تشکیل شده که تابع 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>
می توانید پیش نمایش کارتان را در مثال زیر مشاهده کنید:
پیش نمایش (نکته: در این مثال، ما از فایلی که در سرور سایت گوگل قرار دارد استفاده کرده ایم).
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
» چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» ایجاد باکس جمع شونده با جاوا اسکریپت و دریم ویور
commentنظرات (۲۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: جواد
زمان: ۱۵:۰۴:۰۳ - تاریخ: ۱۳۹۱/۰۷/۰۷
ایول داداش... با حال بود... دمت گرم...
نویسنده: S
زمان: ۱۹:۲۹:۵۷ - تاریخ: ۱۳۹۱/۱۲/۲۱
تشکر از زحماتتون
نویسنده: امیررضا
زمان: ۰۴:۰۹:۴۴ - تاریخ: ۱۳۹۲/۰۳/۲۰
سلام ممنون خیلی آموزش عالی بود
نویسنده: سید محمد
زمان: ۱۱:۱۵:۲۵ - تاریخ: ۱۳۹۲/۰۵/۰۱
سلام یه سوالی داشتم ، ببین من عرض سایتم را گرفتم 5000 پیکسل ، طوری که پائین سایت اسکرول پیدا می کنه و مثل اسکرول بار کنار باید بلعکس از مثلا سمت چپ بره به طرف راست بجای اینکه از پائین بره بالا ، بگو خب ، حالا من همین کد رو می خوام استفاده کنم منتهی از جی کئوری که مثلا وقتی روی این دکمه کلیک می کنم بره به عرض مثلا 3000 پیکسل بعد اونجا یه دکمه دیگه باشه که وقتی روش کلیک می کنی بره رو عرض 5000 پیکسل ، می خواستم بدونم چه جوری میشه یه نقطه خاصی را مشخص کرد ؟ با تشکر
پاسخ: 
سلام
انجام این کار با کد حاضر ممکن نیست، از طرفی این حالت استاندارد نیست (داشتن اسکرول افقی در صفحه) لذا راه حل آماده ای برای آن وجود ندارد (مگر اینکه با جی کئوری آشنا باشید، وقت بگذارید و دستورات را متناسب با نیاز خود تعریف کنید)، به نظر باید به دنبال کدهای اسلایدر افقی باشید نه اینکه در صفحه اسکرول افقی ایجاد کنید.
نویسنده: سایت تاپ ناب
زمان: ۰۰:۱۶:۲۱ - تاریخ: ۱۳۹۲/۰۵/۱۴
با تشکر از این آموزش ممنون
نویسنده: تلخ
زمان: ۱۷:۱۸:۱۱ - تاریخ: ۱۳۹۲/۰۶/۲۲
سلام سايتتون چيزی در حدود يک روياست ...
نویسنده: erfan
زمان: ۱۸:۰۷:۱۹ - تاریخ: ۱۳۹۲/۰۶/۲۹
اصلا نفهمیدم چی شد اگه میتونی یه دونه به شکله عکس کریس رونالدو به ایمیلم بفرست
پاسخ: 
آموزش به اندازه کافی گویا است، متاسفانه امکان ارسال به ایمیل وجود ندارد.
نویسنده: یو پی اس
زمان: ۲۳:۳۹:۲۰ - تاریخ: ۱۳۹۲/۱۰/۰۴
با سلام
ممنون عالی بود
نویسنده: علی
زمان: ۱۷:۲۴:۲۱ - تاریخ: ۱۳۹۲/۱۱/۲۹
بسیار خوب و مفید بود ممنون
نویسنده: امیر حسین
زمان: ۱۲:۳۷:۱۴ - تاریخ: ۱۳۹۳/۰۲/۱۹
سلام ببخشید نمیشه تصویرش رو عوض کنم
پاسخ: 
سلام
اگر با CSS آشنا باشید، می توانید به جای تصویر زیر، تصویر مورد نظر خودتان را جایگزین کنید.
 background: #ddd url(up-arrow.png) no-repeat center center;
نویسنده: میثم
زمان: ۱۵:۲۳:۵۵ - تاریخ: ۱۳۹۳/۰۳/۳۰
سلام خسته نباشید
اگر امکانش هست مطلبی هم در مورد fancy-box قرار بدید.
همچنین در رابطه با اون کادر هایی که گزینه های چپ و راست دارن و میشه تصویر رو در بین کادر انتخاب کرد. (با زدن دکمه چپ ، ردیف یک واحد به سمت چپ طی میکنه و با زدن دکمه راست ، ردیف یک واحد به سمت راست طی میکنه.)
مرسی.
پاسخ: 
سلام
در کوتاه مدت مقدور نیست، اما در مطالب آینده مد نظر خواهند بود!
نویسنده: reza
زمان: ۱۲:۵۵:۵۵ - تاریخ: ۱۳۹۳/۰۵/۰۴
با سلام
میخواستم بپرسم که چطوری میشه position یک div رو بر اساس فاصله اش از پایین صفحه تغییر داد زمانی که صفحه اسکرول میخوره به پایین؟
تغییر position بر اساس میزان اسکرول خوردن از بالا رو میدونم که به شکل زیر هست ولی میزان اسکرول باقی مانده از پایین صفحه رو چطور باید کدنویسی کرد؟
ممنون میشم که راهنماییتون رو به ایمیلم ارسال کنید
پاسخ: 
سلام
متد scrollTop در جی کئوری موقعیت یک عنصر از لحاظ عمودی یا vertical را مشخص می کند، لذا محاسبه از پائین یا بالا تفاوتی ندارد و این ارتفاع صفحه نمایش است که موثر است و نشان می دهد که چه میزان به انتهای صفحه باقی مانده.
نویسنده: آل موبایل
زمان: ۱۵:۳۴:۲۰ - تاریخ: ۱۳۹۳/۰۶/۲۸
سلام خیلی ممنون استفاده کردم.
نویسنده: soran
زمان: ۱۲:۵۲:۳۵ - تاریخ: ۱۳۹۳/۰۷/۱۷
ايول داداش
دمت گرم
من توي سايت هاي انگليسي خيلي گشتم نتونستم چيزي گير بيايم يا شايد چون زبانم خوب نيست نتونستم درست سرچ كنم و اينجا راحت مطلبي كه ميخواستم گيرم اومد
خدا خيرت بده
نویسنده: ataee
زمان: ۰۰:۵۱:۵۴ - تاریخ: ۱۳۹۳/۰۷/۱۸
خیلی عالی بود، ممنون
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 2
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...