Merge pull request #136 from Preeti8021/scrolltop

Scroll to top button
shrey141102 · Dec 15, 2023 · 8c67fbf · 8c67fbf
2 parents 9c38870 + cbb7f0c
commit 8c67fbf
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -1,51 +1,60 @@
 <head>
-	<link rel="stylesheet" href="style.css">
-	<link rel="stylesheet" href="BannerStyle.css">
-  <link rel="stylesheet" href="Footer.css">
-    <link rel="shortcut icon" type="image/x-icon" href="https://www.computerhope.com/jargon/j/javascript.png"/>
-  <meta name="theme-color" content="#daa37f">
+  <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="BannerStyle.css" />
+  <link rel="stylesheet" href="Footer.css" />
+  <link rel="shortcut icon" type="image/x-icon" href="https://www.computerhope.com/jargon/j/javascript.png" />
+  <meta name="theme-color" content="#daa37f" />
   <meta content="width=device-width, initial-scale=1" name="viewport" />
-    <title>JavaScript Projects</title>
-  </head>
-
-  <body>
+  <title>JavaScript Projects</title>
+  <script src="https://kit.fontawesome.com/32ceed9cc4.js"></script>
+</head>
+
+<body>
   <div class="banner">
     <div class="banner__overlay">
       <div class="banner__container">
         <h1 class="banner__title">JavaScript Projects</h1>
-        <p class="banner__text">Find best mini projects using Html CSS JavaScript</p>
+        <p class="banner__text">
+          Find best mini projects using Html CSS JavaScript
+        </p>
         <a href="#Bottom" class="btnBanner btn--opacity">Projects</a>
       </div>
-      <img class="banner__scroll-down" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij4KICA8Zz4KICAgIDxwYXRoIGQ9Im0xMjEuMywzNC42Yy0xLjYtMS42LTQuMi0xLjYtNS44LDBsLTUxLDUxLjEtNTEuMS01MS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDUzLjksNTMuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDUzLjktNTMuOWMxLjctMS42IDEuNy00LjIgMC4xLTUuOHoiIGZpbGw9IiNGRkZGRkYiLz4KICA8L2c+Cjwvc3ZnPgo=" />
+      <a href="#Bottom">
+        <img class="banner__scroll-down"
+          src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjkgMTI5IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4Ij4KICA8Zz4KICAgIDxwYXRoIGQ9Im0xMjEuMywzNC42Yy0xLjYtMS42LTQuMi0xLjYtNS44LDBsLTUxLDUxLjEtNTEuMS01MS4xYy0xLjYtMS42LTQuMi0xLjYtNS44LDAtMS42LDEuNi0xLjYsNC4yIDAsNS44bDUzLjksNTMuOWMwLjgsMC44IDEuOCwxLjIgMi45LDEuMiAxLDAgMi4xLTAuNCAyLjktMS4ybDUzLjktNTMuOWMxLjctMS42IDEuNy00LjIgMC4xLTUuOHoiIGZpbGw9IiNGRkZGRkYiLz4KICA8L2c+Cjwvc3ZnPgo=" />
+      </a>
     </div>
   </div>
+
   <div class="projects">
     <a id="Bottom"></a>
     <h1 class="heading">Projects</h1>
 
-
-
-    <ul class="cards">
-
-      </ul>
+    <ul class="cards"></ul>
     <script src="script.js"></script>
   </div>
+
   <div class="footer">
     <div class="col social">
-      <h1>Creator: </h1>
+      <h1>Creator:</h1>
       <a target="_blank" class="a" href="https://github.com/shrey141102">Shreyansh Khaitan</a>
     </div>
     <div class="col social">
       <h1>Website by:</h1>
       <a target="_blank" class="a" href="https://github.com/Infinite-Null">Ankit Kumar Shah</a>
     </div>
     <div class="col social">
-      <h1>Repository: </h1>
+      <h1>Repository:</h1>
       <a target="_blank" class="a" href="https://github.com/shrey141102/Javascript-projects">Github</a>
     </div>
     <h1 class="footerTitle">@JavaScript Projects</h1>
-  <div class="clearfix"></div>
+    <div class="clearfix"></div>
   </div>
-  </div>
-
-  </body>
+
+  <!-- Scroll to top button  -->
+  <button id="top" title="Go to top">
+    <i class="fa-solid fa-arrow-up"></i>
+  </button>
+
+
+</body>
diff --git a/script.js b/script.js
@@ -343,3 +343,23 @@ function createCard(title, discription, link, image) {
 projects.map((e) => {
   createCard(e.title, e.discription, e.link, e.image);
 });
+
+// ----------Scroll to top button ---------
+document.addEventListener("DOMContentLoaded", function () {
+  var scrollButton = document.getElementById("top");
+
+  // Show or hide the scroll button based on the scroll position
+  window.onscroll = function () {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+      scrollButton.style.display = "block";
+    } else {
+      scrollButton.style.display = "none";
+    }
+  };
+
+  // Scroll to the top when the button is clicked
+  scrollButton.addEventListener("click", function () {
+    var projectsSection = document.getElementById("Bottom");
+    projectsSection.scrollIntoView({ behavior: "smooth" });
+  });
+});
diff --git a/style.css b/style.css
@@ -138,3 +138,24 @@ img {
 }
 
 
+
+#top {
+  display: none;
+  position: fixed;
+  bottom: 10px;
+  right: 5px;
+  background-color: rgb(225, 149, 99);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  height: 50px;
+  width: 50px;
+  cursor: pointer;
+  font-size: 20px;
+}
+#top:hover{
+  cursor: pointer;
+  background-color: rgb(225, 149, 99);
+  height: 52px;
+  font-size: 22px;
+}