diff --git a/assets/back-to-top.js b/assets/back-to-top.js
new file mode 100644
index 0000000..9c1865e
--- /dev/null
+++ b/assets/back-to-top.js
@@ -0,0 +1,30 @@
+(function () {
+ const btn = document.getElementById("back-to-top");
+ if (!btn) return;
+
+ const toggleVisibility = () => {
+ if (window.scrollY > 0) {
+ btn.style.display = "flex";
+ requestAnimationFrame(() => {
+ btn.style.opacity = "1";
+ btn.style.transform = "translateY(0)";
+ });
+ } else {
+ btn.style.opacity = "0";
+ btn.style.transform = "translateY(10px)";
+ setTimeout(() => {
+ if (window.scrollY === 0) btn.style.display = "none";
+ }, 300);
+ }
+ };
+
+ const scrollToTop = (e) => {
+ e && e.preventDefault();
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ };
+
+ btn.addEventListener("click", scrollToTop);
+ window.addEventListener("scroll", toggleVisibility, { passive: true });
+ window.addEventListener("resize", toggleVisibility);
+ toggleVisibility();
+})();
diff --git a/assets/custom.css b/assets/custom.css
index e5bf6c5..afb1cb3 100644
--- a/assets/custom.css
+++ b/assets/custom.css
@@ -6,7 +6,7 @@ body::before {
font-size: 1.2rem;
font-weight: bold;
padding: 10px;
- background-color: #3F51B5;
+ background-color: #3f51b5;
color: white;
}
@@ -14,3 +14,41 @@ a[href$=".pdf"] {
color: #ff5722;
font-weight: bold;
}
+
+/* Back-to-Top Button */
+.back-to-top {
+ position: fixed;
+ right: 20px;
+ bottom: 24px;
+ width: 50px;
+ height: 50px;
+ border-radius: 20%;
+ border: none;
+ background: #3f51b5;
+ color: #fff;
+ font-size: 22px;
+ cursor: pointer;
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
+ z-index: 9999;
+ display: none; /* hidden by default */
+ align-items: center;
+ justify-content: center;
+}
+
+.back-to-top:hover,
+.back-to-top:focus {
+ background: #303f9f;
+ outline: none;
+}
+
+.back-to-top:active {
+ transform: translateY(1px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .back-to-top {
+ transition: none;
+ }
+}
diff --git a/index.html b/index.html
index 1d0860b..4006aa2 100644
--- a/index.html
+++ b/index.html
@@ -1,32 +1,40 @@
-
-
-
- Learn PostgreSQL
-
-
-
-
-
-
+
+
+
+ Learn PostgreSQL
+
+
+
+
+
+
-
-
+
+
-
-
+
+
-
-
-
+
+
+
+
+
+
+
+