BACK TO TOP
הגדרות
העתק קוד
מרחק הופעה
SHOW ON
מהירות גלילה
SCROLL SPEED
סגנון גלילה
SCROLL EASING
אנימציית כניסה
ENTRANCE ANIMATION
אנימציית יציאה
EXIT ANIMATION
var backToTop = document.querySelector(".back-to-top"); var speedUp = 500; var showOn = 200; var theEasing = "swing"; document.addEventListener("scroll", () => { if (document.body.scrollTop >showOn || document.documentElement.scrollTop > showOn) { backToTop.classList.add("showin"); backToTop.classList.remove("hidein"); } else { backToTop.classList.add("hidein"); backToTop.classList.remove("showin"); } }); jQuery(document).ready(function($){ $(".back-to-top").click(function () { $('html, body').animate({scrollTop: 0}, speedUp, theEasing); return false; }); });
.back-to-top{ cursor: pointer; opacity: 0; visibility: hidden; } .back-to-top.showin{ animation-name: btt-showin; animation-duration: 1s ; animation-fill-mode: both; } .back-to-top.hidein{ animation-name: btt-hidein; animation-duration: 1s ; animation-fill-mode: both; } @keyframes btt-showin { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; visibility:visible; } } @keyframes btt-hidein { 0% { transform: translateX(0) rotate(0deg); opacity: 1; } 100% { transform: translateX(-200px) rotate(-540deg); opacity: 0; visibility:hidden; } }
Please switch to desktop