<!DOCTYPE html>
<html lang="ka">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
height:3000px;
margin:0;
background:#0b1020;
font-family:sans-serif;
}
/* BUTTON */
.scroll-top{
position:fixed;
right:20px;
bottom:20px;
width:52px;
height:52px;
background:rgba(255,255,255,0.06);
border-radius:12px;
backdrop-filter:blur(10px);
display:flex;
align-items:center;
overflow:hidden;
cursor:pointer;
transition:0.35s ease;
z-index:9999;
}
/* EXPAND */
.scroll-top:hover{
width:190px;
}
/* TEXT */
.scroll-text{
color:#fff;
white-space:nowrap;
font-size:15px;
font-weight:500;
opacity:0;
transform:translateX(-10px);
transition:0.3s ease;
margin-left:18px;
}
/* SHOW TEXT */
.scroll-top:hover .scroll-text{
opacity:1;
transform:translateX(0);
}
/* ICON AREA */
.icon-box{
width:52px;
min-width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
margin-left:auto;
}
/* REAL ARROW */
.arrow{
color:white;
font-size:24px;
line-height:1;
transform:translateY(-1px);
}
</style>
</head>
<body>
<div class="scroll-top" id="scrollTop">
<div class="scroll-text">
ზევით დაბრუნება
</div>
<div class="icon-box">
<div class="arrow">↑</div>
</div>
</div>
<script>
const scrollTop = document.getElementById("scrollTop");
scrollTop.onclick = () => {
window.scrollTo({
top:0,
behavior:"smooth"
});
};
</script>
</body>
</html>
