From 29b3f31dd7efba9d57674ca355bb598c43f8c8de Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 18 Oct 2023 19:08:52 +0100
Subject: [PATCH 1/3] fix image z-index

---
 src/markdoc/nodes/Image.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/markdoc/nodes/Image.svelte b/src/markdoc/nodes/Image.svelte
index 4d980bd8834..6f416c05ffd 100644
--- a/src/markdoc/nodes/Image.svelte
+++ b/src/markdoc/nodes/Image.svelte
@@ -82,6 +82,7 @@
         position: fixed;
         inset: 0;
         background-color: rgba(0, 0, 0, 0.25);
+        z-index: 1000;
     }
 
     .content {
@@ -95,5 +96,7 @@
 
         max-height: 75vh;
         max-width: calc(100% - 2.5rem);
+
+        z-index: 1000;
     }
 </style>

From 503cc97b5e046344778130d29c32558897728303 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 18 Oct 2023 19:11:32 +0100
Subject: [PATCH 2/3] fix scroll to top

---
 src/app.html                                  |  74 +--
 src/lib/actions/scrollToTop.ts                |  16 +
 src/lib/layouts/DocsArticle.svelte            | 233 +++----
 src/lib/layouts/DocsTutorial.svelte           |   7 +-
 .../[platform]/[service]/+page.svelte         |   7 +-
 src/routes/kitchensink/+page.svelte           | 614 +++++++++---------
 6 files changed, 496 insertions(+), 455 deletions(-)
 create mode 100644 src/lib/actions/scrollToTop.ts

diff --git a/src/app.html b/src/app.html
index 54720a768d4..8950633bb98 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,41 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="twitter:site" content="@appwrite" />
+        <link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
+        <!-- preload font for headlines -->
+        <link
+            rel="preload"
+            href="/fonts/aeonik-pro/AeonikPro-Regular.woff2"
+            as="font"
+            type="font/woff2"
+            crossorigin
+        />
 
-<head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<meta name="twitter:site" content="@appwrite" />
-	<link rel="icon" type="image/svg+xml" href="/images/logos/logo.svg" />
-	<!-- preload font for headlines -->
-	<link
-		rel="preload"
-		href="/fonts/aeonik-pro/AeonikPro-Regular.woff2"
-		as="font"
-		type="font/woff2"
-		crossorigin />
-	
-	%sveltekit.head%
-</head>
+        %sveltekit.head%
+    </head>
 
-<body class="theme-dark" data-sveltekit-preload-data="hover">
-	<script>
-		const isDocs = window.location.pathname.startsWith('/docs');
-		if (isDocs) {
-			const theme = localStorage.getItem('theme');
-			if (theme) {
-				document.body.classList.remove('theme-dark', 'theme-light');
-				if (theme === 'system') {
-					const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-						? 'dark'
-						: 'light';
-					document.body.classList.add(`theme-${systemTheme}`);
-				} else {
-					document.body.classList.add(`theme-${theme}`);
-				}
-			}
-		}
-	</script>
-	<div id="top" style="display: contents">%sveltekit.body%</div>
-</body>
-
-</html>
\ No newline at end of file
+    <body class="theme-dark" data-sveltekit-preload-data="hover">
+        <script>
+            const isDocs = window.location.pathname.startsWith('/docs');
+            if (isDocs) {
+                const theme = localStorage.getItem('theme');
+                if (theme) {
+                    document.body.classList.remove('theme-dark', 'theme-light');
+                    if (theme === 'system') {
+                        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+                            .matches
+                            ? 'dark'
+                            : 'light';
+                        document.body.classList.add(`theme-${systemTheme}`);
+                    } else {
+                        document.body.classList.add(`theme-${theme}`);
+                    }
+                }
+            }
+        </script>
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
+</html>
diff --git a/src/lib/actions/scrollToTop.ts b/src/lib/actions/scrollToTop.ts
new file mode 100644
index 00000000000..c2f09f2eb0e
--- /dev/null
+++ b/src/lib/actions/scrollToTop.ts
@@ -0,0 +1,16 @@
+export const scrollToTop = (node: HTMLElement) => {
+    const handleClick = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    };
+
+    node.addEventListener('click', handleClick);
+
+    return {
+        destroy() {
+            node.removeEventListener('click', handleClick);
+        }
+    };
+};
diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
index 5f2f8f0d7e5..2578d08acbb 100644
--- a/src/lib/layouts/DocsArticle.svelte
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -1,126 +1,139 @@
 <script lang="ts" context="module">
-	export type TocItem = {
-		title: string;
-		href: string;
-		step?: number;
-		selected?: boolean;
-		children?: Array<{
-			title: string;
-			href: string;
-			selected: boolean;
-		}>;
-	};
+    export type TocItem = {
+        title: string;
+        href: string;
+        step?: number;
+        selected?: boolean;
+        children?: Array<{
+            title: string;
+            href: string;
+            selected: boolean;
+        }>;
+    };
 </script>
 
 <script lang="ts">
-	import { Feedback } from '$lib/components';
+    import { scrollToTop } from '$lib/actions/scrollToTop';
 
-	export let title: string;
-	export let toc: Array<TocItem>;
-	export let back: string | undefined = undefined;
-	export let date: string;
+    import { Feedback } from '$lib/components';
+
+    export let title: string;
+    export let toc: Array<TocItem>;
+    export let back: string | undefined = undefined;
+    export let date: string;
 </script>
 
 <main class="u-contents">
-	<article class="aw-article u-contents">
-		<header class="aw-article-header">
-			<div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
-				{#if back}
-					<a
-						href={back}
-						class="
+    <article class="aw-article u-contents">
+        <header class="aw-article-header">
+            <div class="aw-article-header-start u-flex-vertical aw-u-cross-start">
+                {#if back}
+                    <a
+                        href={back}
+                        class="
                         aw-button is-text aw-is-only-mobile
                         aw-u-padding-block-0 aw-u-padding-inline-start-0 aw-u-padding-inline-end-12"
-						aria-label="previous page"
-					>
-						<span class="icon-cheveron-left" aria-hidden="true" />
-					</a>
-				{/if}
-				<ul class="aw-metadata aw-caption-400">
-					<slot name="metadata" />
-				</ul>
-				<div class="u-position-relative u-flex u-cross-center">
-					{#if back}
-						<a
-							href={back}
-							class="
+                        aria-label="previous page"
+                    >
+                        <span class="icon-cheveron-left" aria-hidden="true" />
+                    </a>
+                {/if}
+                <ul class="aw-metadata aw-caption-400">
+                    <slot name="metadata" />
+                </ul>
+                <div class="u-position-relative u-flex u-cross-center">
+                    {#if back}
+                        <a
+                            href={back}
+                            class="
                         aw-button is-text is-icon aw-u-cross-center aw-u-size-40
                         u-position-absolute u-inset-inline-start-0 aw-u-translate-x-negative"
-							aria-label="previous page"
-						>
-							<span
-								class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
-								aria-hidden="true"
-							/>
-						</a>
-					{/if}
-					<h1 class="aw-title">{title}</h1>
-				</div>
-			</div>
-			<div class="aw-article-header-end" />
-		</header>
-		<div class="aw-article-content">
-			<slot />
-			<Feedback {date} />
-		</div>
-		<aside class="aw-references-menu aw-u-padding-inline-start-24">
-			<div class="aw-references-menu-content">
-				{#if toc && toc.length > 0}
-					<div class="u-flex u-main-space-between u-cross-center u-gap-16">
-						<h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
-					</div>
-					<ol class="aw-references-menu-list">
-						{#each toc as parent (parent.href)}
-							<li class="aw-references-menu-item" class:article-scroll-indicator={parent.selected}>
-								<a
-									href={parent.href}
-									class="aw-references-menu-link"
-									class:is-selected={parent.selected}
-								>
-									{#if parent?.step}
-										<span class="aw-numeric-badge">{parent.step}</span>
-									{/if}
-									<span class="aw-caption-400">{parent.title}</span>
-								</a>
-								{#if parent.children}
-									<ol
-										class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
-									>
-										{#each parent.children as child}
-											<li class="aw-references-menu-item">
-												<a href={child.href} class="aw-references-menu-link">
-													<span class="aw-caption-400">{child.title}</span>
-												</a>
-											</li>
-										{/each}
-									</ol>
-								{/if}
-							</li>
-						{/each}
-					</ol>
-					<div class="u-sep-block-start u-padding-block-start-20">
-						<a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
-							<span class="aw-icon-arrow-up" aria-hidden="true" />
-							<span class="aw-sub-body-500">Back to top</span>
-						</a>
-					</div>
-				{/if}
-			</div>
-		</aside>
-	</article>
+                            aria-label="previous page"
+                        >
+                            <span
+                                class="icon-cheveron-left aw-u-font-size-24 aw-u-color-text-primary aw-is-not-mobile"
+                                aria-hidden="true"
+                            />
+                        </a>
+                    {/if}
+                    <h1 class="aw-title">{title}</h1>
+                </div>
+            </div>
+            <div class="aw-article-header-end" />
+        </header>
+        <div class="aw-article-content">
+            <slot />
+            <Feedback {date} />
+        </div>
+        <aside class="aw-references-menu aw-u-padding-inline-start-24">
+            <div class="aw-references-menu-content">
+                {#if toc && toc.length > 0}
+                    <div class="u-flex u-main-space-between u-cross-center u-gap-16">
+                        <h5 class="aw-references-menu-title aw-eyebrow">On This Page</h5>
+                    </div>
+                    <ol class="aw-references-menu-list">
+                        {#each toc as parent (parent.href)}
+                            <li
+                                class="aw-references-menu-item"
+                                class:article-scroll-indicator={parent.selected}
+                            >
+                                <a
+                                    href={parent.href}
+                                    class="aw-references-menu-link"
+                                    class:is-selected={parent.selected}
+                                >
+                                    {#if parent?.step}
+                                        <span class="aw-numeric-badge">{parent.step}</span>
+                                    {/if}
+                                    <span class="aw-caption-400">{parent.title}</span>
+                                </a>
+                                {#if parent.children}
+                                    <ol
+                                        class="aw-references-menu-list u-margin-block-start-16 u-margin-inline-start-32"
+                                    >
+                                        {#each parent.children as child}
+                                            <li class="aw-references-menu-item">
+                                                <a
+                                                    href={child.href}
+                                                    class="aw-references-menu-link"
+                                                >
+                                                    <span class="aw-caption-400">{child.title}</span
+                                                    >
+                                                </a>
+                                            </li>
+                                        {/each}
+                                    </ol>
+                                {/if}
+                            </li>
+                        {/each}
+                    </ol>
+                    <div class="u-sep-block-start u-padding-block-start-20">
+                        <a
+                            class="aw-link u-inline-flex u-cross-center u-gap-8"
+                            href="#top"
+                            use:scrollToTop
+                        >
+                            <span class="aw-icon-arrow-up" aria-hidden="true" />
+                            <span class="aw-sub-body-500">Back to top</span>
+                        </a>
+                    </div>
+                {/if}
+            </div>
+        </aside>
+    </article>
 </main>
 
 <style lang="scss">
-	.article-scroll-indicator {
-		position: relative;
-		&::before {
-			position: absolute;
-			content: '';
-			top: 0;
-			left: -1.5rem;
-			height: 100%;
-			width: 2px;
-			background-color: hsl(var(--p-references-menu-link-color-text));
-		}
-	}
+    .article-scroll-indicator {
+        position: relative;
+        &::before {
+            position: absolute;
+            content: '';
+            top: 0;
+            left: -1.5rem;
+            height: 100%;
+            width: 2px;
+            background-color: hsl(var(--p-references-menu-link-color-text));
+        }
+    }
 </style>
diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
index decfe596453..12075d828a3 100644
--- a/src/lib/layouts/DocsTutorial.svelte
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { scrollToTop } from '$lib/actions/scrollToTop';
     import { Feedback } from '$lib/components';
     import type { Tutorial } from '$markdoc/layouts/Tutorial.svelte';
     import type { TocItem } from './DocsArticle.svelte';
@@ -144,7 +145,11 @@
                     {/each}
                 </ol>
                 <div class="u-sep-block-start u-padding-block-start-20">
-                    <a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
+                    <a
+                        class="aw-link u-inline-flex u-cross-center u-gap-8"
+                        href="#top"
+                        use:scrollToTop
+                    >
                         <span class="aw-icon-arrow-up" aria-hidden="true" />
                         <span class="aw-sub-body-500">Back to top</span>
                     </a>
diff --git a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
index c6919bbaf31..d567d3a27bb 100644
--- a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
+++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
@@ -20,6 +20,7 @@
     import { getContext, onMount, setContext } from 'svelte';
     import { writable } from 'svelte/store';
     import { anyify } from '$lib/utils/anyify.js';
+    import { scrollToTop } from '$lib/actions/scrollToTop.js';
 
     export let data;
 
@@ -334,7 +335,11 @@
                         {/each}
                     </ul>
                     <div class="u-sep-block-start aw-u-padding-block-20">
-                        <a class="aw-link u-inline-flex u-cross-center u-gap-8" href="#top">
+                        <a
+                            class="aw-link u-inline-flex u-cross-center u-gap-8"
+                            href="#top"
+                            use:scrollToTop
+                        >
                             <span class="aw-icon-arrow-up" aria-hidden="true" />
                             <span class="aw-sub-body-500">Back to top</span>
                         </a>
diff --git a/src/routes/kitchensink/+page.svelte b/src/routes/kitchensink/+page.svelte
index ebf1ad2b9fd..6a73e31abeb 100644
--- a/src/routes/kitchensink/+page.svelte
+++ b/src/routes/kitchensink/+page.svelte
@@ -1,319 +1,321 @@
-<script type="module" src="/src/main.ts"></script>
+<script type="module" src="/src/main.ts">
+    import { scrollToTop } from '$lib/actions/scrollToTop';
+</script>
 
 <div id="app" class="u-position-relative">
-	<div class="aw-container">
-		<div class="aw-table-wrapper">
-			<br /><br /><br />
+    <div class="aw-container">
+        <div class="aw-table-wrapper">
+            <br /><br /><br />
 
-			<div class="aw-table-scroll">
-				<table class="aw-table">
-					<thead class="aw-table-header">
-						<tr class="aw-table-row">
-							<th class="aw-table-head-col">
-								<span class="aw-eyebrow">HEADER</span>
-							</th>
-							<th class="aw-table-head-col">
-								<span class="aw-eyebrow">HEADER</span>
-							</th>
-							<th class="aw-table-head-col">
-								<span class="aw-eyebrow">HEADER</span>
-							</th>
-							<th class="aw-table-head-col">
-								<span class="aw-eyebrow">HEADER</span>
-							</th>
-						</tr>
-					</thead>
-					<tbody class="aw-table-body">
-						<tr class="aw-table-row">
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-						</tr>
-						<tr class="aw-table-row">
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-						</tr>
-						<tr class="aw-table-row">
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-						</tr>
-						<tr class="aw-table-row">
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-							<td class="aw-table-col">placeholder text</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
+            <div class="aw-table-scroll">
+                <table class="aw-table">
+                    <thead class="aw-table-header">
+                        <tr class="aw-table-row">
+                            <th class="aw-table-head-col">
+                                <span class="aw-eyebrow">HEADER</span>
+                            </th>
+                            <th class="aw-table-head-col">
+                                <span class="aw-eyebrow">HEADER</span>
+                            </th>
+                            <th class="aw-table-head-col">
+                                <span class="aw-eyebrow">HEADER</span>
+                            </th>
+                            <th class="aw-table-head-col">
+                                <span class="aw-eyebrow">HEADER</span>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="aw-table-body">
+                        <tr class="aw-table-row">
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                        </tr>
+                        <tr class="aw-table-row">
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                        </tr>
+                        <tr class="aw-table-row">
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                        </tr>
+                        <tr class="aw-table-row">
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                            <td class="aw-table-col">placeholder text</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
 
-			<br /><br /><br />
-		</div>
-	</div>
-	<div class="theme-dark aw-container">
-		<div>
-			<span class="aw-inline-code">inline-code</span>
-			<br /><br /><br />
-			<ul class="aw-list">
-				<li>item</li>
-				<li>item</li>
-				<li>item</li>
-			</ul>
-			<br /><br /><br />
-			<ol class="aw-numeric-list">
-				<li>item</li>
-				<li>item</li>
-				<li>item</li>
-			</ol>
-			<br /><br /><br />
-		</div>
-		<div class="u-flex u-gap-16">
-			<input type="checkbox" class="is-small" />
-			<input type="checkbox" class="is-small" checked />
-			<input type="checkbox" />
-			<input type="checkbox" checked />
-		</div>
-		<ul class="u-flex u-gap-16">
-			<li><div class="aw-numeric-badge">0</div></li>
-			<li><div class="aw-numeric-badge">1</div></li>
-			<li><div class="aw-numeric-badge">2</div></li>
-			<li><div class="aw-numeric-badge">3</div></li>
-			<li><div class="aw-numeric-badge">4</div></li>
-			<li><div class="aw-numeric-badge">5</div></li>
-		</ul>
-		<div class="u-flex u-gap-16">
-			<a
-				href="https://github.com/appwrite/appwrite/stargazers"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="aw-button is-text"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="18"
-					height="16"
-					viewBox="0 0 18 16"
-					fill="none"
-				>
-					<path
-						d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
-						stroke="white"
-						stroke-opacity="0.48"
-						stroke-width="1.20208"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-				<span class="text">Star on GitHub</span>
-				<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
-			</a>
+            <br /><br /><br />
+        </div>
+    </div>
+    <div class="theme-dark aw-container">
+        <div>
+            <span class="aw-inline-code">inline-code</span>
+            <br /><br /><br />
+            <ul class="aw-list">
+                <li>item</li>
+                <li>item</li>
+                <li>item</li>
+            </ul>
+            <br /><br /><br />
+            <ol class="aw-numeric-list">
+                <li>item</li>
+                <li>item</li>
+                <li>item</li>
+            </ol>
+            <br /><br /><br />
+        </div>
+        <div class="u-flex u-gap-16">
+            <input type="checkbox" class="is-small" />
+            <input type="checkbox" class="is-small" checked />
+            <input type="checkbox" />
+            <input type="checkbox" checked />
+        </div>
+        <ul class="u-flex u-gap-16">
+            <li><div class="aw-numeric-badge">0</div></li>
+            <li><div class="aw-numeric-badge">1</div></li>
+            <li><div class="aw-numeric-badge">2</div></li>
+            <li><div class="aw-numeric-badge">3</div></li>
+            <li><div class="aw-numeric-badge">4</div></li>
+            <li><div class="aw-numeric-badge">5</div></li>
+        </ul>
+        <div class="u-flex u-gap-16">
+            <a
+                href="https://github.com/appwrite/appwrite/stargazers"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="aw-button is-text"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="16"
+                    viewBox="0 0 18 16"
+                    fill="none"
+                >
+                    <path
+                        d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
+                        stroke="white"
+                        stroke-opacity="0.48"
+                        stroke-width="1.20208"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                <span class="text">Star on GitHub</span>
+                <span class="aw-inline-tag aw-sub-body-400">99.9k</span>
+            </a>
 
-			<button class="aw-button is-text is-only-icon">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="18"
-					height="16"
-					viewBox="0 0 18 16"
-					fill="none"
-				>
-					<path
-						d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
-						stroke="white"
-						stroke-opacity="0.48"
-						stroke-width="1.20208"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-			</button>
+            <button class="aw-button is-text is-only-icon">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="16"
+                    viewBox="0 0 18 16"
+                    fill="none"
+                >
+                    <path
+                        d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
+                        stroke="white"
+                        stroke-opacity="0.48"
+                        stroke-width="1.20208"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </button>
 
-			<button class="aw-button is-secondary">
-				<span class="text">Sign Up</span>
-				<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
-			</button>
+            <button class="aw-button is-secondary">
+                <span class="text">Sign Up</span>
+                <span class="aw-inline-tag aw-sub-body-400">99.9k</span>
+            </button>
 
-			<button class="aw-button is-secondary is-only-icon">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="18"
-					height="16"
-					viewBox="0 0 18 16"
-					fill="none"
-				>
-					<path
-						d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
-						stroke="white"
-						stroke-opacity="0.48"
-						stroke-width="1.20208"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-			</button>
+            <button class="aw-button is-secondary is-only-icon">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="16"
+                    viewBox="0 0 18 16"
+                    fill="none"
+                >
+                    <path
+                        d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
+                        stroke="white"
+                        stroke-opacity="0.48"
+                        stroke-width="1.20208"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </button>
 
-			<button class="aw-button">
-				<span class="text">Get started</span>
-				<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
-			</button>
+            <button class="aw-button">
+                <span class="text">Get started</span>
+                <span class="aw-inline-tag aw-sub-body-400">99.9k</span>
+            </button>
 
-			<button class="aw-button is-only-icon">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="18"
-					height="16"
-					viewBox="0 0 18 16"
-					fill="none"
-				>
-					<path
-						d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
-						stroke="white"
-						stroke-opacity="0.48"
-						stroke-width="1.20208"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-			</button>
-		</div>
-		<section class="aw-code-snippet" aria-label="code-snippet panel">
-			<header class="aw-code-snippet-header">
-				<div class="aw-code-snippet-header-start">
-					<div class="u-flex u-gap-16">
-						<div class="aw-tag">
-							<span class="text">Default</span>
-						</div>
-					</div>
-				</div>
-				<div class="aw-code-snippet-header-end">
-					<ul class="buttons-list u-flex u-gap-8">
-						<li class="buttons-list-item u-flex u-cross-child-scenter">
-							<div class="aw-select">
-								<select>
-									<option>Web SDK</option>
-									<option>Android SDK</option>
-								</select>
-								<span class="icon-cheveron-down" aria-hidden="true" />
-							</div>
-						</li>
-						<li class="buttons-list-item aw-u-padding-inline-start-20">
-							<button class="aw-icon-button" aria-label="copy code from code-snippet">
-								<span class="icon-duplicate" aria-hidden="true" />
-							</button>
-						</li>
-					</ul>
-				</div>
-			</header>
-			<div class="aw-code-snippet-content">CONTENT</div>
-		</section>
-		<div>
-			<ul class="u-flex u-gap-8">
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite on Discord" disabled>
-						<span class="icon-discord" aria-hidden="true" />
-					</button>
-				</li>
-				<li>
-					<button class="aw-icon-button" aria-label="Appwrite GitHub" disabled>
-						<span class="icon-github" aria-hidden="true" />
-					</button>
-				</li>
-			</ul>
-		</div>
+            <button class="aw-button is-only-icon">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="16"
+                    viewBox="0 0 18 16"
+                    fill="none"
+                >
+                    <path
+                        d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
+                        stroke="white"
+                        stroke-opacity="0.48"
+                        stroke-width="1.20208"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </button>
+        </div>
+        <section class="aw-code-snippet" aria-label="code-snippet panel">
+            <header class="aw-code-snippet-header">
+                <div class="aw-code-snippet-header-start">
+                    <div class="u-flex u-gap-16">
+                        <div class="aw-tag">
+                            <span class="text">Default</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="aw-code-snippet-header-end">
+                    <ul class="buttons-list u-flex u-gap-8">
+                        <li class="buttons-list-item u-flex u-cross-child-scenter">
+                            <div class="aw-select">
+                                <select>
+                                    <option>Web SDK</option>
+                                    <option>Android SDK</option>
+                                </select>
+                                <span class="icon-cheveron-down" aria-hidden="true" />
+                            </div>
+                        </li>
+                        <li class="buttons-list-item aw-u-padding-inline-start-20">
+                            <button class="aw-icon-button" aria-label="copy code from code-snippet">
+                                <span class="icon-duplicate" aria-hidden="true" />
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </header>
+            <div class="aw-code-snippet-content">CONTENT</div>
+        </section>
+        <div>
+            <ul class="u-flex u-gap-8">
+                <li>
+                    <button class="aw-icon-button" aria-label="Appwrite on Discord" disabled>
+                        <span class="icon-discord" aria-hidden="true" />
+                    </button>
+                </li>
+                <li>
+                    <button class="aw-icon-button" aria-label="Appwrite GitHub" disabled>
+                        <span class="icon-github" aria-hidden="true" />
+                    </button>
+                </li>
+            </ul>
+        </div>
 
-		<div>
-			<a href="#top" class="aw-link">link</a><br />
-			<a href="#top" class="aw-link is-disabled">disabled link</a>
-		</div>
+        <div>
+            <a href="#top" use:scrollToTop class="aw-link">link</a><br />
+            <a href="#top" use:scrollToTop class="aw-link is-disabled">disabled link</a>
+        </div>
 
-		<div>
-			<button class="aw-tag">
-				<span class="text">Default</span>
-			</button>
-		</div>
+        <div>
+            <button class="aw-tag">
+                <span class="text">Default</span>
+            </button>
+        </div>
 
-		<div class="u-flex u-gap-8">
-			<a
-				href="https://github.com/appwrite/appwrite/stargazers"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="aw-button is-text"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="18"
-					height="16"
-					viewBox="0 0 18 16"
-					fill="none"
-				>
-					<path
-						d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
-						stroke="white"
-						stroke-opacity="0.48"
-						stroke-width="1.20208"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-				<span class="text">Star on GitHub</span>
-				<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
-			</a>
-			<button class="aw-button is-secondary">
-				<span class="text">Sign Up</span>
-			</button>
-			<button class="aw-button">
-				<span class="text">Get started</span>
-			</button>
-		</div>
-		<div class="u-flex u-gap-8">
-			<a
-				href="https://github.com/appwrite/appwrite/stargazers"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="aw-button is-text"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					width="18"
-					height="16"
-					viewBox="0 0 18 16"
-					fill="none"
-				>
-					<path
-						d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
-						stroke="white"
-						stroke-opacity="0.48"
-						stroke-width="1.20208"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
-				<span class="text">Star on GitHub</span>
-				<span class="aw-inline-tag aw-sub-body-400">99.9k</span>
-			</a>
-			<button class="aw-button is-secondary" disabled>
-				<span class="text">Sign Up</span>
-			</button>
-			<button class="aw-button" disabled>
-				<span class="text">Get started</span>
-			</button>
-		</div>
-		<div>[TEMP stuff]</div>
-		<div class="aw-eyebrow">Eyebrow</div>
-		<div class="aw-caption-400">Caption 400</div>
-		<div class="aw-caption-500">Caption 500</div>
-		<div class="aw-sub-body-400">Sub Body 400</div>
-		<div class="aw-sub-body-500">Sub Body 500</div>
-		<div class="aw-main-body-400">Main Body 400</div>
-		<div class="aw-main-body-500">Main Body 500</div>
-		<div class="aw-description">Description</div>
-		<div class="aw-label">Label</div>
-		<div class="aw-title">Title</div>
-		<div class="aw-display">Display</div>
-		<div class="aw-headline">Headline</div>
-	</div>
+        <div class="u-flex u-gap-8">
+            <a
+                href="https://github.com/appwrite/appwrite/stargazers"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="aw-button is-text"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="16"
+                    viewBox="0 0 18 16"
+                    fill="none"
+                >
+                    <path
+                        d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
+                        stroke="white"
+                        stroke-opacity="0.48"
+                        stroke-width="1.20208"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                <span class="text">Star on GitHub</span>
+                <span class="aw-inline-tag aw-sub-body-400">99.9k</span>
+            </a>
+            <button class="aw-button is-secondary">
+                <span class="text">Sign Up</span>
+            </button>
+            <button class="aw-button">
+                <span class="text">Get started</span>
+            </button>
+        </div>
+        <div class="u-flex u-gap-8">
+            <a
+                href="https://github.com/appwrite/appwrite/stargazers"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="aw-button is-text"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="18"
+                    height="16"
+                    viewBox="0 0 18 16"
+                    fill="none"
+                >
+                    <path
+                        d="M8.55214 0.894436C8.73682 0.525615 9.26319 0.525617 9.44786 0.894438L11.3548 4.70276C11.4282 4.84944 11.5688 4.95086 11.7312 4.97425L15.9844 5.5871C16.3973 5.64659 16.5607 6.15521 16.2598 6.44413L13.1922 9.38955C13.0721 9.50495 13.0171 9.67255 13.0457 9.83669L13.7708 14.0043C13.8418 14.4126 13.4147 14.7256 13.0468 14.5349L9.23053 12.5564C9.08598 12.4815 8.91402 12.4815 8.76948 12.5564L4.95321 14.5349C4.58534 14.7256 4.1582 14.4126 4.22923 14.0044L4.95432 9.83669C4.98288 9.67255 4.92794 9.50495 4.80776 9.38955L1.74017 6.44413C1.43926 6.15521 1.60274 5.64659 2.01564 5.5871L6.26881 4.97425C6.43118 4.95086 6.5718 4.84944 6.64524 4.70276L8.55214 0.894436Z"
+                        stroke="white"
+                        stroke-opacity="0.48"
+                        stroke-width="1.20208"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+                <span class="text">Star on GitHub</span>
+                <span class="aw-inline-tag aw-sub-body-400">99.9k</span>
+            </a>
+            <button class="aw-button is-secondary" disabled>
+                <span class="text">Sign Up</span>
+            </button>
+            <button class="aw-button" disabled>
+                <span class="text">Get started</span>
+            </button>
+        </div>
+        <div>[TEMP stuff]</div>
+        <div class="aw-eyebrow">Eyebrow</div>
+        <div class="aw-caption-400">Caption 400</div>
+        <div class="aw-caption-500">Caption 500</div>
+        <div class="aw-sub-body-400">Sub Body 400</div>
+        <div class="aw-sub-body-500">Sub Body 500</div>
+        <div class="aw-main-body-400">Main Body 400</div>
+        <div class="aw-main-body-500">Main Body 500</div>
+        <div class="aw-description">Description</div>
+        <div class="aw-label">Label</div>
+        <div class="aw-title">Title</div>
+        <div class="aw-display">Display</div>
+        <div class="aw-headline">Headline</div>
+    </div>
 </div>

From f0a261bdc6cda3a7125678ffafb7a8d46534e22a Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 18 Oct 2023 19:35:31 +0100
Subject: [PATCH 3/3] remove href from scrollers

---
 src/lib/layouts/DocsArticle.svelte                        | 5 ++---
 src/lib/layouts/DocsTutorial.svelte                       | 8 ++------
 .../[version]/[platform]/[service]/+page.svelte           | 5 ++---
 src/routes/kitchensink/+page.svelte                       | 4 ++--
 4 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/lib/layouts/DocsArticle.svelte b/src/lib/layouts/DocsArticle.svelte
index 2578d08acbb..fa9492b2541 100644
--- a/src/lib/layouts/DocsArticle.svelte
+++ b/src/lib/layouts/DocsArticle.svelte
@@ -108,14 +108,13 @@
                         {/each}
                     </ol>
                     <div class="u-sep-block-start u-padding-block-start-20">
-                        <a
+                        <button
                             class="aw-link u-inline-flex u-cross-center u-gap-8"
-                            href="#top"
                             use:scrollToTop
                         >
                             <span class="aw-icon-arrow-up" aria-hidden="true" />
                             <span class="aw-sub-body-500">Back to top</span>
-                        </a>
+                        </button>
                     </div>
                 {/if}
             </div>
diff --git a/src/lib/layouts/DocsTutorial.svelte b/src/lib/layouts/DocsTutorial.svelte
index 12075d828a3..4caa61a093e 100644
--- a/src/lib/layouts/DocsTutorial.svelte
+++ b/src/lib/layouts/DocsTutorial.svelte
@@ -145,14 +145,10 @@
                     {/each}
                 </ol>
                 <div class="u-sep-block-start u-padding-block-start-20">
-                    <a
-                        class="aw-link u-inline-flex u-cross-center u-gap-8"
-                        href="#top"
-                        use:scrollToTop
-                    >
+                    <button class="aw-link u-inline-flex u-cross-center u-gap-8" use:scrollToTop>
                         <span class="aw-icon-arrow-up" aria-hidden="true" />
                         <span class="aw-sub-body-500">Back to top</span>
-                    </a>
+                    </button>
                 </div>
             </div>
         </aside>
diff --git a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
index d567d3a27bb..e6afff9de56 100644
--- a/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
+++ b/src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
@@ -335,14 +335,13 @@
                         {/each}
                     </ul>
                     <div class="u-sep-block-start aw-u-padding-block-20">
-                        <a
+                        <button
                             class="aw-link u-inline-flex u-cross-center u-gap-8"
-                            href="#top"
                             use:scrollToTop
                         >
                             <span class="aw-icon-arrow-up" aria-hidden="true" />
                             <span class="aw-sub-body-500">Back to top</span>
-                        </a>
+                        </button>
                     </div>
                 </div>
             {/if}
diff --git a/src/routes/kitchensink/+page.svelte b/src/routes/kitchensink/+page.svelte
index 6a73e31abeb..ae03c63ce6e 100644
--- a/src/routes/kitchensink/+page.svelte
+++ b/src/routes/kitchensink/+page.svelte
@@ -228,8 +228,8 @@
         </div>
 
         <div>
-            <a href="#top" use:scrollToTop class="aw-link">link</a><br />
-            <a href="#top" use:scrollToTop class="aw-link is-disabled">disabled link</a>
+            <button use:scrollToTop class="aw-link">link</button><br />
+            <button use:scrollToTop class="aw-link is-disabled">disabled link</button>
         </div>
 
         <div>
