دکمه برو به بالا متریال با انیمیشن

سلاااااااام!

صبح جمعتون بخیر! امیدوارم شب جمعه خوبی داشته باشین :| چطورین؟خوب یه پست براتون نوشتم فول حرفه ای و کاربردی. شما با این کد قادر خواهید دکمه بازگشت به بالا در سایت خودتون ایجاد کنید فقط کافیست کدش رو در قالبتون قرار دهید.

برای نمایش دمو " اینجا کلیک کنید " .

سلاااااااام!

صبح جمعتون بخیر! امیدوارم شب جمعه خوبی داشته باشین :| چطورین؟خوب یه پست براتون نوشتم فول حرفه ای و کاربردی. شما با این کد قادر خواهید دکمه بازگشت به بالا در سایت خودتون ایجاد کنید فقط کافیست کدش رو در قالبتون قرار دهید.

برای نمایش دمو " اینجا کلیک کنید " .

توجه کنید این دکمه با جی کوئری کار کرده و نیاز به کتاب خانه جی کوئری در قالبتون داره نگران نباشید کدش رو تو کد زیر جا کردم.

درضمن کتاب خانه فونت آیکون هم نیاز داره که فراموش نشه.

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

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

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

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

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

- زیبا و کم حجم

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

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

<link rel="stylesheet" href="https://rozup.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="https://rozup.ir/view/96809/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="https://rozup.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>

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