پباده سازی css: المان #back-top با position:fixed تمجید طراحی سایت در مشهد نموده تا در برگه به طور اثبات باقی بماند. تگ span مازاد میباشد. تگ span را به‌این برهان اضافه نموده ام که بتوانم به آن گرافیک تصویری اضافه نمایم. همینطور ویژگی transition:1s (1s = 1 second) برای ساخت و ساز افکت ماوس اور فید اضافه نمودم.

بدین قسمت نگاهی بیندازید دمو (یادداشت: هنوز نصیب jquery اضافه نگردیده).


#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}

#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;

/* 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;

/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}


نصیب jQuery (دمو)
کد پایین کد Javascript است. به طور پیش فرض, تگ #back-top پنهان گردد (آن
تگ در دمو میباشد

) . آن گاه اسکرول توشه ورقه را بررسی می کند (اسکرول به بالا) هنگامی که بزرگتر از 100 بود, بعد از آن بر روی المان #back-top فید می کند, در غیر این شکل فید اوت می کند. نصیب بعدی مجموع کلیدهای فانکشنی می‌باشند. وقتی که #back-top کلیک شد, کاغذ را به وضعیت 0 اسکرول میدهد.

در شرایطی که که میخواهید کد نویسی jquery حافظه بگیرید, نصیب مقاله ها jquery را مطالعه فرمائید.