diff --git a/100_projects/20-scroll-to-top-button/index.html b/100_projects/20-scroll-to-top-button/index.html
new file mode 100644
index 0000000..daa4526
--- /dev/null
+++ b/100_projects/20-scroll-to-top-button/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+ Document
+
+
+ Back To Top
+
+
+
\ No newline at end of file
diff --git a/100_projects/20-scroll-to-top-button/main.js b/100_projects/20-scroll-to-top-button/main.js
new file mode 100644
index 0000000..0a3a0d1
--- /dev/null
+++ b/100_projects/20-scroll-to-top-button/main.js
@@ -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",
+ });
+};
\ No newline at end of file
diff --git a/100_projects/20-scroll-to-top-button/style.css b/100_projects/20-scroll-to-top-button/style.css
new file mode 100644
index 0000000..37ae7a9
--- /dev/null
+++ b/100_projects/20-scroll-to-top-button/style.css
@@ -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;
+}
\ No newline at end of file