Add scroll to top functionnality

godotengine · Aug 14, 2024 · 7765de1 · 7765de1
1 parent 44b4412
commit 7765de1
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 2 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -348,6 +348,10 @@ hr {
   border-top: 2px solid var(--base-color-text);
 }
 
+main {
+  position: relative;
+}
+
 .intro-title {
   margin-top: 48px;
   margin-bottom: 48px;
@@ -1558,4 +1562,4 @@ section.sponsors .grid {
   width: 100%;
   border: none;
   margin: 35px 0;
-}
+}
diff --git a/assets/css/releases/4.3.scss b/assets/css/releases/4.3.scss
@@ -122,6 +122,53 @@ $donate-robot-size: 500px;
 	}
 }
 
+#scroll-to-top {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	pointer-events: none;
+
+	--card-padding: #{r-get-desktop($card-padding)};
+	@include is-mobile() {
+		--card-padding: #{r-get-mobile($card-padding)};
+	}
+
+	.link {
+		pointer-events: all;
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		width: 50px;
+		height: 50px;
+		margin: var(--card-padding);
+		text-decoration: none;
+		background-color: white;
+		border-radius: var(--card-padding);
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: rgba(0,0,0,25%) 1px 1px 5px;
+
+		color: black;
+		font-size: 1.5em;
+
+		&:hover {
+			span {
+				text-decoration: underline;
+			}
+		}
+
+		span {
+			transform:
+				translateY(-3px);
+		}
+	}
+}
+
 #foundation-donate {
 	background-color: #EFF1F5;
 	@include is-dark() {

diff --git a/assets/js/releases/4.3.mjs b/assets/js/releases/4.3.mjs
@@ -274,3 +274,58 @@ const lazyVideoObserver = new IntersectionObserver((entries, observer) => {
 for (const lazyVideo of lazyVideos) {
 	lazyVideoObserver.observe(lazyVideo);
 }
+
+// Show/hide the scroll-to-top button
+const linksElement = document.querySelector("#links");
+const scrollToTopElement = document.querySelector("#scroll-to-top");
+let scrollToTopTween = null;
+let scrollState = "";
+const showScrollToTop = () => {
+	if (scrollState === "show") {
+		return;
+	}
+	scrollState = "show";
+	if (scrollToTopTween != null) {
+		scrollToTopTween.kill();
+	}
+	scrollToTopElement.style.display = "block";
+	scrollToTopTween = gsap.to(scrollToTopElement, {
+		opacity: 1,
+		duration: 0.5,
+	});
+};
+const hideScrollToTop = () => {
+	if (scrollState === "hide") {
+		return;
+	}
+	scrollState = "hide";
+	if (scrollToTopTween != null) {
+		scrollToTopTween.kill();
+	}
+	scrollToTopTween = gsap.to(scrollToTopElement, {
+		opacity: 0,
+		duration: 0.5,
+		onComplete: () => {
+			scrollToTopElement.style.display = "none";
+		}
+	});
+};
+const scrollToTopObserver = new IntersectionObserver((entries, observer) => {
+	// requestAnimationFrame(animationFrameHandler);
+	const entry = entries[0];
+	if (entry.isIntersecting) {
+		hideScrollToTop();
+		console.log("intersecting");
+	} else {
+		const rect = linksElement.getBoundingClientRect();
+		console.log(rect);
+		if (rect.y > window.innerHeight) {
+			console.log("hide");
+			hideScrollToTop();
+		} else {
+			console.log("show");
+			showScrollToTop();
+		}
+	}
+});
+scrollToTopObserver.observe(linksElement);
diff --git a/pages/releases/4.3.html b/pages/releases/4.3.html
@@ -49,7 +49,7 @@
 	<link rel="stylesheet" href="/assets/css/releases/4.3.noscript.css" />
 </noscript>
 
-<div class="release-header">
+<div id="top" class="release-header">
 	<div class="release-header-content">
 		<!-- Important to separate `.release-header-content` from `.container`. -->
 		<div class="container">
@@ -113,6 +113,10 @@ <h2 class="header-title">
 	</div>
 </div>
 
+<div id="scroll-to-top">
+	<a class="link" href="#links"><span>⬆</span></a>
+</div>
+
 <div class="release-content">
 	<div id="download" class="section section-download">
 		<div class="container">