This is an automated email from the ASF dual-hosted git repository.
potiuk pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/main by this push:
new 5be2f09ea3 feat: scroll to top button (#1293)
5be2f09ea3 is described below
commit 5be2f09ea3767671d16761505e9131676fa75dd5
Author: Coding-Alchemist-Abhijay <[email protected]>
AuthorDate: Tue Dec 2 17:55:36 2025 +0530
feat: scroll to top button (#1293)
* add scroll to top button
* add Scroll To Top Button
* add scroll to top button bugfix-1
* add scroll to top button bugfix-2
* add scroll to top button bugfix-3
* add scroll to top button bugfix-4
* add scroll to top button bugfix-5
---
landing-pages/site/assets/scss/_base-layout.scss | 49 ++++++++++++++++++--
landing-pages/site/assets/scss/_scroll-to-top.scss | 32 +++++++++++++
landing-pages/site/assets/scss/main-custom.scss | 1 +
landing-pages/site/data/integrations.json | 2 +-
landing-pages/site/layouts/_default/baseof.html | 9 +++-
landing-pages/site/layouts/blog/baseof.html | 9 +++-
landing-pages/site/layouts/community/baseof.html | 9 +++-
landing-pages/site/layouts/docs/baseof.html | 10 +++-
landing-pages/site/layouts/install/baseof.html | 9 +++-
landing-pages/site/layouts/meetups/baseof.html | 9 +++-
.../partials/buttons/button-with-arrow.html | 24 ++++++++++
landing-pages/site/layouts/partials/footer.html | 1 +
.../site/layouts/partials/scroll-to-top.html | 22 +++++++++
.../site/layouts/partials/suggest-change.html | 2 -
.../site/layouts/privacy-notice/baseof.html | 10 +++-
landing-pages/site/layouts/roadmap/baseof.html | 10 +++-
landing-pages/site/layouts/taxonomy/baseof.html | 9 +++-
landing-pages/site/layouts/use-cases/baseof.html | 9 +++-
landing-pages/src/index.js | 1 +
landing-pages/src/js/scrollToTop.js | 54 ++++++++++++++++++++++
landing-pages/yarn.lock | 2 +-
21 files changed, 266 insertions(+), 17 deletions(-)
diff --git a/landing-pages/site/assets/scss/_base-layout.scss
b/landing-pages/site/assets/scss/_base-layout.scss
index 02639e9532..f999f3e247 100644
--- a/landing-pages/site/assets/scss/_base-layout.scss
+++ b/landing-pages/site/assets/scss/_base-layout.scss
@@ -23,25 +23,68 @@
// padding: 123px 0 40px;
padding: 163px 0 40px; // TEMP - accommodate Airflow Summit banner (123 + 40)
+ &--scrollButton {
+ position: sticky;
+ width: 100%;
+ margin-left: 40px;
+ margin-right: 40px;
+ bottom: 40px;
+ z-index: 1;
+ }
+
+ &--suggestButton {
+ display: flex;
+ justify-content: flex-end;
+ position: sticky;
+ width: 100%;
+ margin-left: auto;
+ margin-right: 40px;
+ bottom: 40px;
+ z-index: 1;
+ }
+
&--button {
display: flex;
position: sticky;
- width: fit-content;
+ width: 100%;
margin-left: auto;
margin-right: 40px;
bottom: 40px;
- justify-content: flex-end;
+ justify-content: space-between;
z-index: 1;
}
+
}
@media (max-width: $tablet) {
.base-layout {
padding: 76px 0 60px;
- &--button {
+ &--suggestButton{
+ display: none;
+ }
+
+ &--scrollButton button span {
display: none;
}
+
+ &--scrollButton button {
+ width: 55px;
+ height: 55px; // Slightly increased button height
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ }
+
+ &--scrollButton button svg {
+ display: block;
+ margin: 0 auto;
+ position: relative;
+ left: 56%; // Move just a little bit more to the right
+ transform: translateX(-50%);
+ }
+
}
}
diff --git a/landing-pages/site/assets/scss/_scroll-to-top.scss
b/landing-pages/site/assets/scss/_scroll-to-top.scss
new file mode 100644
index 0000000000..6e4508f3e6
--- /dev/null
+++ b/landing-pages/site/assets/scss/_scroll-to-top.scss
@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.scroll-to-top--button {
+ display: flex;
+ position: sticky;
+ bottom : 40px;
+ width: fit-content;
+ margin-left: 40px;
+ justify-content: flex-start;
+ z-index: 2;
+
+ @media (max-width: $tablet) {
+ display: none;
+ }
+}
diff --git a/landing-pages/site/assets/scss/main-custom.scss
b/landing-pages/site/assets/scss/main-custom.scss
index 7073ba2c85..60cb3e2ef3 100644
--- a/landing-pages/site/assets/scss/main-custom.scss
+++ b/landing-pages/site/assets/scss/main-custom.scss
@@ -48,6 +48,7 @@
@import "search";
@import "rating";
@import "rst-content";
+@import "scroll-to-top";
@import "content-drawer";
@import "dropdown";
@import "highlights";
diff --git a/landing-pages/site/data/integrations.json
b/landing-pages/site/data/integrations.json
index a6a2daf80b..9745dcf0e4 120000
--- a/landing-pages/site/data/integrations.json
+++ b/landing-pages/site/data/integrations.json
@@ -1 +1 @@
-../static/integrations.json
\ No newline at end of file
+../static/integrations.json
diff --git a/landing-pages/site/layouts/_default/baseof.html
b/landing-pages/site/layouts/_default/baseof.html
index 8858e75f7c..311e322e37 100644
--- a/landing-pages/site/layouts/_default/baseof.html
+++ b/landing-pages/site/layouts/_default/baseof.html
@@ -32,7 +32,14 @@
<main role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
- {{ partial "suggest-change" . }}
+ <div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+ </div>
</div>
</div>
{{ partialCached "footer.html" . }}
diff --git a/landing-pages/site/layouts/blog/baseof.html
b/landing-pages/site/layouts/blog/baseof.html
index 8466877599..2e84ede665 100644
--- a/landing-pages/site/layouts/blog/baseof.html
+++ b/landing-pages/site/layouts/blog/baseof.html
@@ -31,7 +31,14 @@
<main role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
- {{ partial "suggest-change" . }}
+ <div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+ </div>
</div>
</div>
{{ partialCached "footer.html" . }}
diff --git a/landing-pages/site/layouts/community/baseof.html
b/landing-pages/site/layouts/community/baseof.html
index 6814d9bd5a..fc5ac3b0da 100644
--- a/landing-pages/site/layouts/community/baseof.html
+++ b/landing-pages/site/layouts/community/baseof.html
@@ -31,9 +31,16 @@
<main role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
- {{ partial "suggest-change" . }}
+ <div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
</div>
</div>
+</div>
{{ partialCached "footer.html" . }}
{{ partial "scripts.html" . }}
</body>
diff --git a/landing-pages/site/layouts/docs/baseof.html
b/landing-pages/site/layouts/docs/baseof.html
index 5742a85d16..61d8cc2c5b 100644
--- a/landing-pages/site/layouts/docs/baseof.html
+++ b/landing-pages/site/layouts/docs/baseof.html
@@ -32,7 +32,15 @@
{{ block "main" . }}{{ end }}
</main>
</div>
- {{ partial "suggest-change" . }}
+<div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+</div>
+</div>
</div>
{{ partialCached "footer.html" . }}
{{ partial "scripts.html" . }}
diff --git a/landing-pages/site/layouts/install/baseof.html
b/landing-pages/site/layouts/install/baseof.html
index 7f46604fb7..b3131cba45 100644
--- a/landing-pages/site/layouts/install/baseof.html
+++ b/landing-pages/site/layouts/install/baseof.html
@@ -31,7 +31,14 @@
<main role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
- {{ partial "suggest-change" . }}
+ <div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+ </div>
</div>
</div>
{{ partialCached "footer.html" . }}
diff --git a/landing-pages/site/layouts/meetups/baseof.html
b/landing-pages/site/layouts/meetups/baseof.html
index 8466877599..2e84ede665 100644
--- a/landing-pages/site/layouts/meetups/baseof.html
+++ b/landing-pages/site/layouts/meetups/baseof.html
@@ -31,7 +31,14 @@
<main role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
- {{ partial "suggest-change" . }}
+ <div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+ </div>
</div>
</div>
{{ partialCached "footer.html" . }}
diff --git a/landing-pages/site/layouts/partials/buttons/button-with-arrow.html
b/landing-pages/site/layouts/partials/buttons/button-with-arrow.html
new file mode 100644
index 0000000000..566865e460
--- /dev/null
+++ b/landing-pages/site/layouts/partials/buttons/button-with-arrow.html
@@ -0,0 +1,24 @@
+{{/*
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
+ */}}
+<button id="{{ .id }}" class="btn-hollow btn-brown btn-with-icon
with-box-shadow {{ .class }}">
+ <svg xmlns="http://www.w3.org/2000/svg"; width="24" height="24"
fill="currentColor" viewBox="0 0 16 16">
+ <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753
1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+ </svg>
+ <span class="bodytext__medium--brownish-grey">{{ .text }}</span>
+</button>
diff --git a/landing-pages/site/layouts/partials/footer.html
b/landing-pages/site/layouts/partials/footer.html
index c467d38579..7752756cf7 100644
--- a/landing-pages/site/layouts/partials/footer.html
+++ b/landing-pages/site/layouts/partials/footer.html
@@ -102,3 +102,4 @@
</span>
</div>
</footer>
+
diff --git a/landing-pages/site/layouts/partials/scroll-to-top.html
b/landing-pages/site/layouts/partials/scroll-to-top.html
new file mode 100644
index 0000000000..3f4237f94c
--- /dev/null
+++ b/landing-pages/site/layouts/partials/scroll-to-top.html
@@ -0,0 +1,22 @@
+{{/*
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
+ */}}
+
+ {{ partial "buttons/button-with-arrow" (dict "text" "Scroll to top" "class"
"button-fixed" "id" "scroll-to-top-btn") }}
+
+
\ No newline at end of file
diff --git a/landing-pages/site/layouts/partials/suggest-change.html
b/landing-pages/site/layouts/partials/suggest-change.html
index 514b66cacc..88c68a0cff 100644
--- a/landing-pages/site/layouts/partials/suggest-change.html
+++ b/landing-pages/site/layouts/partials/suggest-change.html
@@ -17,9 +17,7 @@
under the License.
*/}}
-<div class="base-layout--button">
{{ $url := printf
"https://github.com/apache/airflow-site/edit/main/landing-pages/site/content/%s/%s";
$.Site.Language.Lang .Path }}
<a href={{ $url }}>
{{ partial "buttons/button-with-icon" (dict "text" "Suggest a change
on this page" "class" "button-fixed") }}
</a>
-</div>
diff --git a/landing-pages/site/layouts/privacy-notice/baseof.html
b/landing-pages/site/layouts/privacy-notice/baseof.html
index 5742a85d16..61d8cc2c5b 100644
--- a/landing-pages/site/layouts/privacy-notice/baseof.html
+++ b/landing-pages/site/layouts/privacy-notice/baseof.html
@@ -32,7 +32,15 @@
{{ block "main" . }}{{ end }}
</main>
</div>
- {{ partial "suggest-change" . }}
+<div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+</div>
+</div>
</div>
{{ partialCached "footer.html" . }}
{{ partial "scripts.html" . }}
diff --git a/landing-pages/site/layouts/roadmap/baseof.html
b/landing-pages/site/layouts/roadmap/baseof.html
index ca7dcd7b2f..31d0c78f13 100644
--- a/landing-pages/site/layouts/roadmap/baseof.html
+++ b/landing-pages/site/layouts/roadmap/baseof.html
@@ -65,7 +65,15 @@
{{ block "main" . }}{{ end }}
</main>
</div>
- {{ partial "suggest-change" . }}
+<div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+</div>
+</div>
</div>
{{ partialCached "footer.html" . }}
{{ partial "scripts.html" . }}
diff --git a/landing-pages/site/layouts/taxonomy/baseof.html
b/landing-pages/site/layouts/taxonomy/baseof.html
index 8466877599..2e84ede665 100644
--- a/landing-pages/site/layouts/taxonomy/baseof.html
+++ b/landing-pages/site/layouts/taxonomy/baseof.html
@@ -31,7 +31,14 @@
<main role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
- {{ partial "suggest-change" . }}
+ <div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+ </div>
</div>
</div>
{{ partialCached "footer.html" . }}
diff --git a/landing-pages/site/layouts/use-cases/baseof.html
b/landing-pages/site/layouts/use-cases/baseof.html
index 8466877599..2e84ede665 100644
--- a/landing-pages/site/layouts/use-cases/baseof.html
+++ b/landing-pages/site/layouts/use-cases/baseof.html
@@ -31,7 +31,14 @@
<main role="main" class="td-main container">
{{ block "main" . }}{{ end }}
</main>
- {{ partial "suggest-change" . }}
+ <div class="base-layout--button">
+ <div class="base-layout--scrollButton">
+ {{ partial "scroll-to-top" . }}
+ </div>
+ <div class="base-layout--suggestButton">
+ {{ partial "suggest-change" . }}
+ </div>
+ </div>
</div>
</div>
{{ partialCached "footer.html" . }}
diff --git a/landing-pages/src/index.js b/landing-pages/src/index.js
index 3b6c772fc7..01c5b60c59 100644
--- a/landing-pages/src/index.js
+++ b/landing-pages/src/index.js
@@ -27,6 +27,7 @@ import "./js/progressTracking";
import "./js/rating";
import "./js/makeTableResponsive";
import "./js/versionSelector";
+import "./js/scrollToTop";
if (document.querySelector("#search")) {
import(/* webpackChunkName: "search" */ "./js/searchBlogPosts");
diff --git a/landing-pages/src/js/scrollToTop.js
b/landing-pages/src/js/scrollToTop.js
new file mode 100644
index 0000000000..4be968fd38
--- /dev/null
+++ b/landing-pages/src/js/scrollToTop.js
@@ -0,0 +1,54 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const SCROLL_THRESHOLD = 100; // Show button after scrolling 100px
+
+document.addEventListener("DOMContentLoaded", function() {
+ const scrollToTopBtn = document.getElementById("scroll-to-top-btn");
+
+ if (!scrollToTopBtn) {
+ return; // Button not found on this page
+ }
+
+ // Function to toggle button visibility
+ function toggleScrollToTopBtn() {
+ if (window.scrollY > SCROLL_THRESHOLD) {
+ scrollToTopBtn.style.display = "flex";
+ } else {
+ scrollToTopBtn.style.display = "none";
+ }
+ }
+
+ // Function to scroll to top smoothly
+ function scrollToTop() {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth"
+ });
+ }
+
+ // Add scroll event listener
+ window.addEventListener("scroll", toggleScrollToTopBtn);
+
+ // Add click event listener
+ scrollToTopBtn.addEventListener("click", scrollToTop);
+
+ // Initialize button visibility on load
+ toggleScrollToTopBtn();
+});
diff --git a/landing-pages/yarn.lock b/landing-pages/yarn.lock
index 094ddc2d11..2ede7863ea 100644
--- a/landing-pages/yarn.lock
+++ b/landing-pages/yarn.lock
@@ -7565,4 +7565,4 @@ yocto-queue@^1.0.0:
zod@^3.25.51:
version "3.25.76"
resolved "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz";
- integrity
sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==
+ integrity
sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==
\ No newline at end of file
