Adding back to top button

DecodersCommunity · Oct 30, 2023 · 5745ee6 · 5745ee6
1 parent 54fac5d
commit 5745ee6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -148,6 +148,7 @@
 
 
 
+    <a href="#"><div class="BackToTop"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnrB1XJEbDlZ6Gh_chZwXJ7CflXN4PoYzndA&usqp=CAU" alt="Back To Top"></div></a>
     <main>
 
         <div class="carouselContainer">

diff --git a/styles.css b/styles.css
@@ -2,6 +2,7 @@ html {
   overflow-y: scroll;
   margin: 0;
   padding: 0;
+  scroll-behavior: smooth;
 }
 body {
   font-family: "Ninja Naruto", arial;
@@ -138,7 +139,18 @@ body::-webkit-scrollbar-thumb {
   box-shadow: 0 5px 50px 0 #15f4ee inset, 0 5px 50px 0 #15f4ee,
     0 5px 50px 0 #15f4ee inset, 0 5px 50px 0 #15f4ee;
 }
-
+.BackToTop{
+  position:fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  bottom: 30px;
+  right: 30px;
+  height: 40px;
+  width: 40px;
+  border-radius: 100%;
+  z-index: 2;
+}
 .activated {
   width: 360px;
 }