نحوه ایجاد دکمه رفتن به بالای صفحه (go to top) با جاوا اسکریپت
یکی از کاربردهای جاوا اسکریپت (javascript) در صفحات وب، امکان ایجاد دکمه های کنترلی برای راحتی هر چه بیشتر کاربران، مخصوصا در مورد صفحاتی است که ارتفاع زیادی دارند، از طرفی برخی از طراحان وب علاقمندند که به جهت زیباتر شدن قالب هایشان از این نوع تکنیک ها استفاده نمایند؛ اگر چه برخی ترجیح می دهند از توابع و کتابخانه های جی کئوری (jquery) به جای توابع ساده جاوا اسکریپت بدین منظور استفاده کنند، اما متاسفانه معمولا حاصل کار ایجاد صفحاتی حجیم و در نهایت کندی بارگذاری سایت یا وبلاگ و افزایش استفاده از پهنای باند سرور است؛ به هر صورت در این مطلب قصد داریم انجام این کار را به شما عزیزان آموزش دهیم.
ابتدا در قسمت هدر سایت خود (بین تگ های <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
}, ۸۰۰);
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>
موفق باشید.
