BackToTop button added to each project page and certification page

MaxineXiong · Apr 26, 2024 · 651b1b9 · 651b1b9
1 parent b0994a0
commit 651b1b9
Show file tree

Hide file tree

Showing 13 changed files with 482 additions and 153 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -2427,7 +2427,7 @@ button,
 
 
 
-#backToTopText {
+#backToTopText, #backToTopTextForProjects {
   position: fixed;
   bottom: 20px;
   right: 20px;
@@ -2441,6 +2441,6 @@ button,
   cursor: pointer;
 }
 
-#backToTopText:hover {
+#backToTopText:hover, #backToTopTextForProjects:hover {
   background-color: rgba(102, 153, 255, 0.6);
 }
diff --git a/certification.html b/certification.html
@@ -203,11 +203,14 @@ <h3 style='height:3em'>Certified Associate in Project Management (CAPM)®</h3>
 
 								</section>
 
-
-
 						</div>
 					</div>
 
+
+				<!-- Back to Top Button -->
+					<span id="backToTopTextForProjects">Back to Top ↑</span>
+
+
 				<!-- Sidebar -->
 					<div id="sidebar">
 						<div class="inner">
@@ -267,20 +270,43 @@ <h2 style='margin-bottom:2em'><strong>CERTIFICATIONS</strong></h2>
 			</div>
 
 		<!-- Scripts -->
-		<!-- Smooth scrolling effect with listed items on side navigation pane -->
-			<script>
-				const menuLinks = document.querySelectorAll("#menu a[href^='#']");
-
-				menuLinks.forEach(link => {
-					link.addEventListener("click", function(event) {
-						event.preventDefault();
-						const targetSectionId = link.getAttribute("href");
-						const targetSection = document.querySelector(targetSectionId);
-
-						targetSection.scrollIntoView({ behavior: "smooth" });
-					});
+		<script>
+
+		//Smooth scrolling effect with listed items on side navigation pane
+			const menuLinks = document.querySelectorAll("#menu a[href^='#']");
+
+			menuLinks.forEach(link => {
+				link.addEventListener("click", function(event) {
+					event.preventDefault();
+					const targetSectionId = link.getAttribute("href");
+					const targetSection = document.querySelector(targetSectionId);
+
+					targetSection.scrollIntoView({ behavior: "smooth" });
 				});
-			</script>
+			});
+
+
+	 //Back to top button
+			const backToTopTextForProjects = document.getElementById("backToTopTextForProjects");
+
+			// Show/hide the text based on scroll position
+			window.addEventListener("scroll", function() {
+				if (window.scrollY > 300) {
+					backToTopTextForProjects.style.display = "inline-block";
+				} else {
+					backToTopTextForProjects.style.display = "none";
+				}
+			});
+
+			// Scroll to the top when the text is clicked
+			backToTopTextForProjects.addEventListener("click", function() {
+				window.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				});
+			});
+
+		</script>
 			<script src="assets/js/jquery.min.js"></script>
 			<script src="assets/js/browser.min.js"></script>
 			<script src="assets/js/breakpoints.min.js"></script>

diff --git a/projects/ai-projects.html b/projects/ai-projects.html
@@ -210,6 +210,11 @@ <h3 style='height:1.5em'>AI Plays Flappy Bird</h3>
 						</div>
 					</div>
 
+
+				<!-- Back to Top Button -->
+					<span id="backToTopTextForProjects">Back to Top ↑</span>
+
+
 				<!-- Sidebar -->
 					<div id="sidebar">
 						<div class="inner">
@@ -269,20 +274,43 @@ <h2 style='margin-bottom:2em'><strong>AI Projects</strong></h2>
 			</div>
 
 		<!-- Scripts -->
-		<!-- Smooth scrolling effect with listed items on side navigation pane -->
-			<script>
-				const menuLinks = document.querySelectorAll("#menu a[href^='#']");
-
-				menuLinks.forEach(link => {
-					link.addEventListener("click", function(event) {
-						event.preventDefault();
-						const targetSectionId = link.getAttribute("href");
-						const targetSection = document.querySelector(targetSectionId);
-
-						targetSection.scrollIntoView({ behavior: "smooth" });
-					});
+		<script>
+
+		//Smooth scrolling effect with listed items on side navigation pane
+			const menuLinks = document.querySelectorAll("#menu a[href^='#']");
+
+			menuLinks.forEach(link => {
+				link.addEventListener("click", function(event) {
+					event.preventDefault();
+					const targetSectionId = link.getAttribute("href");
+					const targetSection = document.querySelector(targetSectionId);
+
+					targetSection.scrollIntoView({ behavior: "smooth" });
 				});
-			</script>
+			});
+
+
+	 //Back to top button
+			const backToTopTextForProjects = document.getElementById("backToTopTextForProjects");
+
+			// Show/hide the text based on scroll position
+			window.addEventListener("scroll", function() {
+				if (window.scrollY > 300) {
+					backToTopTextForProjects.style.display = "inline-block";
+				} else {
+					backToTopTextForProjects.style.display = "none";
+				}
+			});
+
+			// Scroll to the top when the text is clicked
+			backToTopTextForProjects.addEventListener("click", function() {
+				window.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				});
+			});
+
+		</script>
 			<script src="../assets/js/jquery.min.js"></script>
 			<script src="../assets/js/browser.min.js"></script>
 			<script src="../assets/js/breakpoints.min.js"></script>

diff --git a/projects/algorithm.html b/projects/algorithm.html
@@ -83,6 +83,11 @@ <h3 style='height:1.5em'>Google Maps Style Route Planner</h3>
 						</div>
 					</div>
 
+
+				<!-- Back to Top Button -->
+					<span id="backToTopTextForProjects">Back to Top ↑</span>
+
+
 				<!-- Sidebar -->
 					<div id="sidebar">
 						<div class="inner">
@@ -139,20 +144,43 @@ <h2 style='margin-bottom:2em'><strong>Algorithmic Projects</strong></h2>
 			</div>
 
 		<!-- Scripts -->
-		<!-- Smooth scrolling effect with listed items on side navigation pane -->
-			<script>
-				const menuLinks = document.querySelectorAll("#menu a[href^='#']");
-
-				menuLinks.forEach(link => {
-					link.addEventListener("click", function(event) {
-						event.preventDefault();
-						const targetSectionId = link.getAttribute("href");
-						const targetSection = document.querySelector(targetSectionId);
-
-						targetSection.scrollIntoView({ behavior: "smooth" });
-					});
+		<script>
+
+		//Smooth scrolling effect with listed items on side navigation pane
+			const menuLinks = document.querySelectorAll("#menu a[href^='#']");
+
+			menuLinks.forEach(link => {
+				link.addEventListener("click", function(event) {
+					event.preventDefault();
+					const targetSectionId = link.getAttribute("href");
+					const targetSection = document.querySelector(targetSectionId);
+
+					targetSection.scrollIntoView({ behavior: "smooth" });
 				});
-			</script>
+			});
+
+
+	 //Back to top button
+			const backToTopTextForProjects = document.getElementById("backToTopTextForProjects");
+
+			// Show/hide the text based on scroll position
+			window.addEventListener("scroll", function() {
+				if (window.scrollY > 300) {
+					backToTopTextForProjects.style.display = "inline-block";
+				} else {
+					backToTopTextForProjects.style.display = "none";
+				}
+			});
+
+			// Scroll to the top when the text is clicked
+			backToTopTextForProjects.addEventListener("click", function() {
+				window.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				});
+			});
+
+		</script>
 			<script src="../assets/js/jquery.min.js"></script>
 			<script src="../assets/js/browser.min.js"></script>
 			<script src="../assets/js/breakpoints.min.js"></script>

diff --git a/projects/data-engineering.html b/projects/data-engineering.html
@@ -71,6 +71,11 @@ <h3 style='height:1.5em'>SQLZOO Solutions</h3>
 						</div>
 					</div>
 
+
+				<!-- Back to Top Button -->
+					<span id="backToTopTextForProjects">Back to Top ↑</span>
+
+
 				<!-- Sidebar -->
 					<div id="sidebar">
 						<div class="inner">
@@ -127,20 +132,43 @@ <h2 style='margin-bottom:2em'><strong>Data Engineering Projects</strong></h2>
 			</div>
 
 		<!-- Scripts -->
-		<!-- Smooth scrolling effect with listed items on side navigation pane -->
-			<script>
-				const menuLinks = document.querySelectorAll("#menu a[href^='#']");
-
-				menuLinks.forEach(link => {
-					link.addEventListener("click", function(event) {
-						event.preventDefault();
-						const targetSectionId = link.getAttribute("href");
-						const targetSection = document.querySelector(targetSectionId);
-
-						targetSection.scrollIntoView({ behavior: "smooth" });
-					});
+		<script>
+
+		//Smooth scrolling effect with listed items on side navigation pane
+			const menuLinks = document.querySelectorAll("#menu a[href^='#']");
+
+			menuLinks.forEach(link => {
+				link.addEventListener("click", function(event) {
+					event.preventDefault();
+					const targetSectionId = link.getAttribute("href");
+					const targetSection = document.querySelector(targetSectionId);
+
+					targetSection.scrollIntoView({ behavior: "smooth" });
 				});
-			</script>
+			});
+
+
+	 //Back to top button
+			const backToTopTextForProjects = document.getElementById("backToTopTextForProjects");
+
+			// Show/hide the text based on scroll position
+			window.addEventListener("scroll", function() {
+				if (window.scrollY > 300) {
+					backToTopTextForProjects.style.display = "inline-block";
+				} else {
+					backToTopTextForProjects.style.display = "none";
+				}
+			});
+
+			// Scroll to the top when the text is clicked
+			backToTopTextForProjects.addEventListener("click", function() {
+				window.scrollTo({
+					top: 0,
+					behavior: "smooth"
+				});
+			});
+
+		</script>
 			<script src="../assets/js/jquery.min.js"></script>
 			<script src="../assets/js/browser.min.js"></script>
 			<script src="../assets/js/breakpoints.min.js"></script>

diff --git a/projects/html-css.html b/projects/html-css.html
@@ -121,16 +121,16 @@ <h3 style='height:1.5em'>ImageAI Computer Vision Flask Apps</h3>
 										</div>
 
 
-
-
-
-
-
 									</div>
 								</section>
 						</div>
 					</div>
 
+
+				<!-- Back to Top Button -->
+					<span id="backToTopTextForProjects">Back to Top ↑</span>
+
+
 				<!-- Sidebar -->
 					<div id="sidebar">
 						<div class="inner">
@@ -188,20 +188,43 @@ <h2 style='margin-bottom:2em'><strong>HTML5 & CSS3 Web Applications</strong></h2
 			</div>
 
 		<!-- Scripts -->
-		<!-- Smooth scrolling effect with listed items on side navigation pane -->
-			<script>
-				const menuLinks = document.querySelectorAll("#menu a[href^='#']");
-
-				menuLinks.forEach(link => {
-					link.addEventListener("click", function(event) {
-						event.preventDefault();
-						const targetSectionId = link.getAttribute("href");
-						const targetSection = document.querySelector(targetSectionId);
-
-						targetSection.scrollIntoView({ behavior: "smooth" });
-					});
+		<script>
+
+		//Smooth scrolling effect with listed items on side navigation pane
+			const menuLinks = document.querySelectorAll("#menu a[href^='#']");
+
+			menuLinks.forEach(link => {
+				link.addEventListener("click", function(event) {
+					event.preventDefault();
+					const targetSectionId = link.getAttribute("href");
+					const targetSection = document.querySelector(targetSectionId);
+
+					targetSection.scrollIntoView({ behavior: "smooth" });
+				});
+			});
+
+
+	 //Back to top button
+			const backToTopTextForProjects = document.getElementById("backToTopTextForProjects");
+
+			// Show/hide the text based on scroll position
+			window.addEventListener("scroll", function() {
+				if (window.scrollY > 300) {
+					backToTopTextForProjects.style.display = "inline-block";
+				} else {
+					backToTopTextForProjects.style.display = "none";
+				}
+			});
+
+			// Scroll to the top when the text is clicked
+			backToTopTextForProjects.addEventListener("click", function() {
+				window.scrollTo({
+					top: 0,
+					behavior: "smooth"
 				});
-			</script>
+			});
+
+		</script>
 			<script src="../assets/js/jquery.min.js"></script>
 			<script src="../assets/js/browser.min.js"></script>
 			<script src="../assets/js/breakpoints.min.js"></script>