Skip to content

Commit 3fdbbb2

Browse files
tejaspokale22tejaspokale22
authored
feat: implement Back-to-Top button with smooth scroll and fade animation (#35) (#36)
1 parent 8994649 commit 3fdbbb2

3 files changed

Lines changed: 103 additions & 27 deletions

File tree

‎assets/back-to-top.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
(function () {
2+
const btn = document.getElementById("back-to-top");
3+
if (!btn) return;
4+
5+
const toggleVisibility = () => {
6+
if (window.scrollY > 0) {
7+
btn.style.display = "flex";
8+
requestAnimationFrame(() => {
9+
btn.style.opacity = "1";
10+
btn.style.transform = "translateY(0)";
11+
});
12+
} else {
13+
btn.style.opacity = "0";
14+
btn.style.transform = "translateY(10px)";
15+
setTimeout(() => {
16+
if (window.scrollY === 0) btn.style.display = "none";
17+
}, 300);
18+
}
19+
};
20+
21+
const scrollToTop = (e) => {
22+
e && e.preventDefault();
23+
window.scrollTo({ top: 0, behavior: "smooth" });
24+
};
25+
26+
btn.addEventListener("click", scrollToTop);
27+
window.addEventListener("scroll", toggleVisibility, { passive: true });
28+
window.addEventListener("resize", toggleVisibility);
29+
toggleVisibility();
30+
})();

‎assets/custom.css‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,49 @@ body::before {
66
font-size: 1.2rem;
77
font-weight: bold;
88
padding: 10px;
9-
background-color: #3F51B5;
9+
background-color: #3f51b5;
1010
color: white;
1111
}
1212

1313
a[href$=".pdf"] {
1414
color: #ff5722;
1515
font-weight: bold;
1616
}
17+
18+
/* Back-to-Top Button */
19+
.back-to-top {
20+
position: fixed;
21+
right: 20px;
22+
bottom: 24px;
23+
width: 50px;
24+
height: 50px;
25+
border-radius: 20%;
26+
border: none;
27+
background: #3f51b5;
28+
color: #fff;
29+
font-size: 22px;
30+
cursor: pointer;
31+
opacity: 0;
32+
transform: translateY(10px);
33+
transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
34+
z-index: 9999;
35+
display: none; /* hidden by default */
36+
align-items: center;
37+
justify-content: center;
38+
}
39+
40+
.back-to-top:hover,
41+
.back-to-top:focus {
42+
background: #303f9f;
43+
outline: none;
44+
}
45+
46+
.back-to-top:active {
47+
transform: translateY(1px);
48+
}
49+
50+
@media (prefers-reduced-motion: reduce) {
51+
.back-to-top {
52+
transition: none;
53+
}
54+
}

‎index.html‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width,initial-scale=1">
6-
<title>Learn PostgreSQL</title>
7-
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css" />
8-
<link rel="stylesheet" href="assets/custom.css" />
9-
</head>
10-
<body>
11-
<!-- Docsify container -->
12-
<div id="app"></div>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Learn PostgreSQL</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdn.jsdelivr.net/npm/docsify/themes/vue.css"
10+
/>
11+
<link rel="stylesheet" href="assets/custom.css" />
12+
</head>
13+
<body>
14+
<!-- Docsify container -->
15+
<div id="app"></div>
1316

14-
<!-- Docsify Core -->
15-
<script src="//cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
17+
<!-- Back to Top Button -->
18+
<button id="back-to-top" class="back-to-top" type="button">&#8593;</button>
1619

17-
<!-- Docsify Configuration -->
18-
<script>
19-
window.$docsify = {
20-
name: 'Learn PostgreSQL',
21-
repo: 'fahimahammed/learn-postgresql',
22-
loadSidebar: '_sidebar.md', // Ensure _sidebar.md exists in the repo root
23-
subMaxLevel: 2,
24-
search: 'auto',
25-
themeColor: '#3F51B5'
26-
}
27-
</script>
20+
<!-- Docsify Core -->
21+
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>
2822

29-
<!-- Docsify Plugins -->
30-
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
31-
</body>
23+
<!-- Docsify Configuration -->
24+
<script>
25+
window.$docsify = {
26+
name: "Learn PostgreSQL",
27+
repo: "fahimahammed/learn-postgresql",
28+
loadSidebar: "_sidebar.md", // Ensure _sidebar.md exists in the repo root
29+
subMaxLevel: 2,
30+
search: "auto",
31+
themeColor: "#3F51B5",
32+
};
33+
</script>
34+
35+
<!-- Docsify Plugins -->
36+
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
37+
<!-- Back to Top Script -->
38+
<script src="assets/back-to-top.js"></script>
39+
</body>
3240
</html>

0 commit comments

Comments
 (0)