خوب اگه ه این صفحه رو در مرورگر اینترنت باز کنید و اون رو مشاهده کنید فقط یک متن ساده رو مشاهده می کنید پس باید با استفاده از css شکل ظاهری دکمه رو ایجاد کنیم . صفحه ی جددی به نام ایجاد کنید و کدهای زیر رو به اون اضافه کنید
html, body{
font-family : Tahoma, Arial, Helvetica, sans-serif;
font-size : 16px;
color : #333;
height : 100%;
text-align : center;
background : #888;
}
#content{
margin : 20px auto 20px auto;
padding: 20px;
border : 1px solid #333;
width : 900px;
height: auto;
background : #FFF;
position : relative;
text-align : left;
}
p{
margin : 0px 0px 0px 0px;
padding: 5px 0px 10px 0px;
line-height : 1.6em;
}
h1{
margin : 0px 0px 0px 0px;
padding: 5px 0px 10px 0px;
font-size : 30px;
font-weight : normal;
}
#back {
cursor : pointer;
display : none;
margin : 0px 0px 0px 370px;
position : fixed;
bottom : 10px;
font-size : 90%;
padding: 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter : alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity: 0.6;
color : #FFF;
font-size : 14px;
z-index: 1000;
}
#back:hover
{
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity: 0.9;
}
خوب تا اینجا صفحه ما شکل ظاهری خود رو بدست آورد می تونید اون رو مشاهده کنید. و اما قدم اخر مربوط به کدهای جی کوری میشود .از اونجایی که می خواهیم هنگام کلیک بر روی دکمه مربوطه با سرعت آهسته به ابتدای صفحه بازگردیم برای ایجاد این انیمیشن باید از جی کوری استفاده کنیم.خوب فایلی به نامbacktotop.js ایجاد کنید و کدهای زیر را به آن اضافه کنید.
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$("#backtotop").fadeIn();
} else {
$("#backtotop").fadeOut();
}
});
$("#backtotop").click(function() {
$("body,html").animate({scrollTop:0},800);
});
});
</script>
خوب این آموزش هم به پایان رسید حالا میتونید نتیجه رو مشاهده کنید
