x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-03-13 17:14:17 +03:00 committed by GitHub
parent 0321f32b7e
commit cf82e537f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
100_projects/20-scroll-to-top-button/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<span class="up">Back To Top</span>
<script src="main.js"></script>
</body>
</html>

12
100_projects/20-scroll-to-top-button/main.js Normal file
View File

@ -0,0 +1,12 @@
let span = document.querySelector(".up");
window.onscroll = function () {
this.scrollY >= 1000 ? span.classList.add("show") : span.classList.remove("show");
};
span.onclick = function () {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};

25
100_projects/20-scroll-to-top-button/style.css Normal file
View File

@ -0,0 +1,25 @@
body {
height: 5000px;
background: #E86357;
}
.up{
position: fixed;
bottom: 30px;
right: -100px;
background-color: #2C2D2A;
color: white;
font-weight: bold;
font-size: 12px;
padding:10px 15px;
border-radius: 4px;
font-family: Arial, Tahoma;
cursor: pointer;
transition: 0.5s;
}
.up:hover{
background: #fff;
color: #2C2D2A;
}
.up.show {
right: 30px;
}