کد ساخت دکمه هدایت به بالا با انیمیشن

سلام در این ساعت از وبسایت نارنجی گراف با کد بالا بر سایت در خدمت شما دوستان هستیم با استفاده از این کد در سایت خود قادر خواهید بود تا با یک کلیک به بالای سایت هدایت شوید

ویژگی های این دکمه میتوان به موارد زیر اشاره کرد:

- رسپانسیو و ولید

- انیمیشن های جذاب

- نمایش در زمانی که ما به پایین اسکرول کنید

- بازگشت به بالا با انیمیشن

- زیبا و کم حجم

آموزش استفاده از کد :

ابتدا کد زیر را در head قالبتون قرار دهید:

<link rel="stylesheet" href="http://up.hypertemp.ir/view/520303/fontawesome.css">
<style>
.up {
width: 60px !important;
height: 60px !important;
background-color: #FFF;
position: fixed;
border-radius: 100%;
box-shadow: 0px 4px 6px -2px #000;
right: 20px;
bottom: -60px;
display:none;
transition: all 0.4s ease 0.1s;
overflow: hidden;
}
.up:hover {
animation: 1s ease-in 0s alternate none infinite running dordorbyhypertemp;
}
.up i {
vertical-align: middle;
text-align: center;
color: #03B0FF;
padding: 11px 14px;
}
.up:hover i {
color: #333;
animation: 1s ease-in 0s alternate none infinite running dordorbyhypertemp;
}
.hypershowup{
display: block !important;
bottom: 20px !important;
}
@-webkit-keyframes dordorbyhypertemp {
0% {transform:scale(0.9)}
50% {border-bottom: 2px solid #E71E6C;transform:scale(1)}
100% {transform:scale(0.9)}
}
@-moz-keyframes dordorbyhypertemp {
0% {transform:scale(0.9)}
50% {border-bottom: 2px solid #E71E6C;transform:scale(1)}
100% {transform:scale(0.9)}
}
@keyframes dordorbyhypertemp {
0% {transform:scale(0.9)}
50% {border-bottom: 2px solid #E71E6C;transform:scale(1)}
100% {transform:scale(0.9)}
}
</style>
<script src="http://up.hypertemp.ir/view/96809/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://up.hypertemp.ir/view/983047/hyperUpera.js" type="text/javascript"></script>

کد زیر هم در هر جا که مورد نظرتون در Body قالبتون قرار دهید:

<a href="#top"><div class="up" id="back-to-top"><i class="fa fa-chevron-up fa-2x uper"></i></div></a>

سوالی چیزی بود در خدمتیم در مورد این مطلب در نظرات.