equinor
diff --git a/‎web/app/[locale]/layout.tsx‎
Lines changed: 2 additions & 0 deletions b/‎web/app/[locale]/layout.tsx‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎web/icons/ArrowUp.tsx‎
Lines changed: 19 additions & 0 deletions b/‎web/icons/ArrowUp.tsx‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎web/icons/index.ts‎
Lines changed: 1 addition & 0 deletions b/‎web/icons/index.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎web/sections/GoToTopButton/index.tsx‎
Lines changed: 46 additions & 0 deletions b/‎web/sections/GoToTopButton/index.tsx‎
Lines changed: 46 additions & 0 deletions
@@ -16,6 +16,7 @@ import DraftModeToast from '@/sections/DraftMode/DraftModeToast'
 import { routing } from '../../i18n/routing'
 import { GoogleTagManagerHead } from './GTMHead'
 import { SiteImprove } from './SiteImprove'
+import GoToTopButton from '@/sections/GoToTopButton'
 
 const equinorRegular = localFont({
   src: '../fonts/equinor/Equinor-Regular.woff',
@@ -69,6 +70,7 @@ export default async function LocaleLayout({
       <body>
         <Toaster />
         {isDraftMode && <DraftModeToast />}
+        <GoToTopButton/>
         {/* <SanityLive onError={handleError} /> */}
         <NextIntlClientProvider>
           <PageProvider
 
@@ -0,0 +1,19 @@
+import { arrow_up } from '@equinor/eds-icons'
+import { forwardRef, type Ref, type SVGProps } from 'react'
+import { TransformableIcon } from './TransformableIcon'
+
+export type ArrowUpProps = {
+  /** Size, use if you need large icon resolutions
+   * @default 24
+   */
+  size?: 16 | 18 | 24 | 32 | 40 | 48
+  /** @ignore */
+  ref?: Ref<SVGSVGElement>
+} & SVGProps<SVGSVGElement>
+
+export const ArrowUp = forwardRef<SVGSVGElement, ArrowUpProps>(
+  function ArrowUp({ ...rest }, ref) {
+    return <TransformableIcon iconData={arrow_up} {...rest} ref={ref} />
+  },
+)
+export default ArrowUp
@@ -4,6 +4,7 @@ export { default as Linkedin } from './Linkedin'
 export { default as Twitter } from './Twitter'
 export { default as Youtube } from './Youtube'
 export { default as ArrowRight } from './ArrowRight'
+export { default as ArrowUp } from './ArrowUp'
 export { default as Play } from './Play'
 export { default as Pause } from './Pause'
 export { default as QuoteSymbol } from './QuoteSymbol'
@@ -0,0 +1,46 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import ArrowUp from '@/icons/ArrowUp'
+
+export default function GoToTopButton() {
+  const [isVisible, setIsVisible] = useState(false)
+
+  // Show button when page is scrolled down
+  const toggleVisibility = () => {
+    if (typeof window !== 'undefined') {
+      setIsVisible(window.scrollY > window.innerHeight)
+    }
+  }
+
+  // Scroll to top smoothly
+  const scrollToTop = () => {
+    if (typeof window !== 'undefined') {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility)
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility)
+    }
+  }, [])
+
+  return (
+    <>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          aria-label="Go to top"
+          className="fixed bottom-8 right-8 z-40 p-3 rounded-full bg-slate-blue-95 text-white shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
+        >
+          <ArrowUp size={24} />
+        </button>
+      )}
+    </>
+  )
+}