Merge pull request #126 from ak-0283/a1

✨ Added Scroll Button to the Blog Page 🔽✨
Jyotibrat · Feb 10, 2025 · ad28e6c · ad28e6c
2 parents a2f0d3a + cb33c5b
commit ad28e6c
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/src/blog.html b/src/blog.html
@@ -12,6 +12,27 @@
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
     <link rel="manifest" href="assets/favicon/site.webmanifest">
+    <style>
+    #scrBtn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: var(--button-background);
+    color: var(--button-color);
+    border: none;
+    padding: 15px 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+    display: none;
+    transition: all 0.3s ease;
+}
+
+    #scrBtn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    }
+    </style>
 </head>
 <body class="about-page">
     <div id="navbar-placeholder">Navbar will load here</div>
@@ -26,6 +47,10 @@ <h1>Mission</h1>
             </div>
         </div> 
 
+        <button onclick="topFunction()" id="scrBtn" title="Go to top">
+            <i class="fas fa-arrow-up fa-lg"></i>
+        </button>
+
         <div class="card2">
                 <img src="https://img.freepik.com/free-photo/magnifying-glass-enlarging-word_1134-334.jpg?t=st=1738693457~exp=1738697057~hmac=476593f0656201ad291df795ee144cf363a3f25e32dd27f97d65f3aafceb3411&w=996" alt="img">
             <div class="info">