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

آموزش برنامه نویسی و مهارتهای وب

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 -


یکشنبه 13 مهر 1393

نظرات ()


یکشنبه 15 مرداد 1396 05:01 ب.ظ
all the time i used to read smaller articles that as well clear
their motive, and that is also happening with this article which I am reading at this place.
شنبه 14 مرداد 1396 12:07 ب.ظ
Every weekend i used to pay a quick visit this web page, for the reason that i want enjoyment, since
this this web site conations really pleasant funny information too.
جمعه 13 مرداد 1396 05:31 ق.ظ
I used to be able to find good information from your blog posts.
یکشنبه 8 مرداد 1396 09:34 ق.ظ
This is a topic that's near to my heart... Take care!
Where are your contact details though?
شنبه 7 مرداد 1396 07:06 ب.ظ
I'm now not certain where you are getting your info, however great topic.
I needs to spend some time studying much more or figuring out more.
Thanks for excellent information I used to be looking for this
information for my mission.
شنبه 7 مرداد 1396 05:58 ب.ظ
Informative article, exactly what I was looking for.
شنبه 7 مرداد 1396 05:44 ب.ظ
Thanks , I've recently been searching for information approximately this topic for
a while and yours is the best I have found out so far.

But, what about the conclusion? Are you sure concerning
the supply?
جمعه 16 تیر 1396 06:24 ب.ظ
Hello to every single one, it's actually a pleasant for me to pay a visit this site, it contains useful Information.
پنجشنبه 25 خرداد 1396 06:11 ب.ظ
بسیار قلب از خود نوشتن در حالی
که صدایی مناسب در آغاز آیا واقعا حل
و فصل خوب با من پس از برخی از زمان.
جایی درون پاراگراف شما موفق به من
مؤمن اما تنها برای while. من این کردم مشکل
خود را با جهش در منطق و شما خواهد را سادگی به پر همه کسانی شکاف.
اگر شما که می توانید انجام من می مطمئنا بود در گم.
یکشنبه 31 اردیبهشت 1396 02:41 ق.ظ
My brother suggested I might like this web site. He was entirely right.
This publish truly made my day. You cann't imagine simply
how much time I had spent for this information! Thanks!
شنبه 30 اردیبهشت 1396 09:45 ق.ظ
We're a bunch of volunteers and starting a new scheme in our community.

Your web site provided us with useful info to work on.
You've performed an impressive activity and our whole group will
be thankful to you.
دوشنبه 18 اردیبهشت 1396 09:06 ق.ظ
First off I want to say excellent blog! I had
a quick question which I'd like to ask if you do not mind.
I was interested to know how you center yourself and clear your mind prior to writing.

I have had a difficult time clearing my mind in getting
my thoughts out there. I truly do take pleasure in writing but it just seems like the
first 10 to 15 minutes are wasted simply just trying to figure out how to begin. Any
suggestions or hints? Cheers!
شنبه 2 اردیبهشت 1396 12:47 ق.ظ
BHW
Hmm it appears like your blog ate my first comment (it
was extremely long) so I guess I'll just sum it up what I submitted and say, I'm thoroughly
enjoying your blog. I as well am an aspiring blog writer but I'm still new to the whole thing.
Do you have any helpful hints for newbie blog
writers? I'd definitely appreciate it.
دوشنبه 28 فروردین 1396 11:33 ق.ظ
BHW
I am not positive the place you are getting your information, however
great topic. I needs to spend some time finding out much more
or working out more. Thanks for excellent info I used to be in search of this info for my mission.

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )