Author: | saeedkohansal |
---|---|
Views Total: | 544 views |
Official Page: | Go to website |
Last Update: | June 23, 2022 |
License: | MIT |
Preview:

Description:
In this post, we’ll build a beautiful animated back to top button that auto reveals & hides when scrolling through the page. This animated back to top button also can work on mobile devices nicely.
How to use it:
1. Add an emoji, text, or SVG back to top button to your webpage.
<span id="backtotop-btn"> <!-------------------------> <!-- ROCKET EMOJI BUTTON --> <!-------------------------> <span class="rocket">🚀</span> <!-----------------> <!-- TEXT BUTTON --> <!-----------------> <!-- <span class="text">Back To Top</span> --> <!--------------------------> <!-- ARROW TOP SVG BUTTON --> <!--------------------------> <!-- <img class="arrow-top" src="/path/to/up-arrow.svg"> --> </span>
2. Make the back to top button fixed on the page.
#backtotop-btn { visibility: hidden; position: fixed; cursor: pointer; right: 16px; bottom: 16px; user-select: none; transition: 1s; }
3. Load the main script at the end of the document.
<script src="backtotop.js"></script>
4. Apply your own CSS animations to the back to top button.
.slide-in-bottom { -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .slide-out-top { -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } @-webkit-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-bottom { 0% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes slide-out-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } } @keyframes slide-out-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } }