Merge pull request #396 from appwrite/add-ids-for-pricing

fix: add ids to headings in the pricing page
appwrite · Nov 29, 2023 · ffea290 · ffea290
2 parents ec0d6e6 + 6eddfcc
commit ffea290
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/lib/utils/scroll.ts b/src/lib/utils/scroll.ts
@@ -18,6 +18,20 @@ export const createScrollInfo = () => {
     let lastDirChange = 0;
 
     onMount(() => {
+        const handleInitialAnchor = () => {
+            if (window.location.hash) {
+                const anchorElement = document.querySelector(window.location.hash);
+                if (anchorElement) {
+                    return window.pageYOffset + anchorElement.getBoundingClientRect().top;
+                }
+            }
+            return 0;
+        };
+
+        const initialTop = handleInitialAnchor();
+        scrollInfo.set({ direction: 'down', top: initialTop, deltaDirChange: 0 });
+        lastDirChange = initialTop;
+
         const handleScroll = () => {
             scrollInfo.update((p) => {
                 const top = window.scrollY;

diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
@@ -64,7 +64,7 @@
                                 >
                                     <div class="aw-pricing-cards-item">
                                         <header class="aw-pricing-cards-header">
-                                            <h2 class="aw-label">Starter</h2>
+                                            <h2 id="starter" class="aw-label">Starter</h2>
                                             <div
                                                 class="aw-title aw-u-color-text-primary u-margin-block-start-8"
                                             >
@@ -112,7 +112,7 @@
                                 >
                                     <div class="aw-pricing-cards-item">
                                         <header class="aw-pricing-cards-header">
-                                            <h2 class="aw-label">Pro</h2>
+                                            <h2 id="pro" class="aw-label">Pro</h2>
                                             <div
                                                 class="aw-title aw-u-color-text-primary u-margin-block-start-8"
                                             >
@@ -159,7 +159,7 @@
                                 >
                                     <div class="aw-pricing-cards-item">
                                         <header class="aw-pricing-cards-header">
-                                            <h2 class="aw-label">Scale</h2>
+                                            <h2 id="scale" class="aw-label">Scale</h2>
                                             <div
                                                 class="aw-title aw-u-color-text-primary u-margin-block-start-8"
                                             >
@@ -205,7 +205,7 @@
                                 style="background:rgba(35, 35, 37, 0.90);"
                             >
                                 <header class="u-flex u-gap-12">
-                                    <h3 class="aw-main-body-500 aw-u-color-text-primary">
+                                    <h3 id="enterprises" class="aw-main-body-500 aw-u-color-text-primary">
                                         Enterprises
                                     </h3>
                                     <div class="aw-inline-tag is-pink">Coming Soon</div>
@@ -228,7 +228,7 @@
                                 style="background:rgba(35, 35, 37, 0.90);"
                             >
                                 <header class="u-flex u-gap-12">
-                                    <h3 class="aw-main-body-500 aw-u-color-text-primary">
+                                    <h3 id="open-source-teams" class="aw-main-body-500 aw-u-color-text-primary">
                                         Open-source teams
                                     </h3>
                                 </header>