From cbc4d839d0a16d381f5c928be92a396992c549ec Mon Sep 17 00:00:00 2001
From: Skydust <evann.jallet@gmail.com>
Date: Thu, 31 Aug 2023 00:23:12 +0200
Subject: [PATCH] Fixed anchoring

---
 components/util/anchoring.tsx | 7 ++++---
 styles/_styles.scss           | 3 +++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/util/anchoring.tsx b/components/util/anchoring.tsx
index 63005ed..9f2e081 100644
--- a/components/util/anchoring.tsx
+++ b/components/util/anchoring.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import {useEffect, useRef, useState} from "react";
 import {tinaField} from "tinacms/dist/react";
-import {Template} from "tinacms";
 import {ObjectField} from "@tinacms/schema-tools/dist/types";
+import {SectionElement} from "@react-types/shared";
 
 interface AnchoringProps {
   text?: string, // Default: Découvrez-en plus !
@@ -11,7 +11,7 @@ interface AnchoringProps {
 
 export const Anchoring = (props: AnchoringProps) => {
   const [opacity, setOpacity] = useState(1);
-  const anchoringRef = useRef(null);
+  const anchoringRef = useRef<HTMLDivElement>(null);
 
   const handleScrollOpacity = () => {
     const scrollTop = window.scrollY || window.pageYOffset;
@@ -21,7 +21,8 @@ export const Anchoring = (props: AnchoringProps) => {
   };
 
   const handleScrollClick = () => {
-    anchoringRef?.current?.scrollIntoView({
+    const nextSection = anchoringRef?.current?.closest("section")?.parentElement?.nextElementSibling;
+    nextSection?.scrollIntoView({
       behavior: "smooth",
       block: "start"
     });
diff --git a/styles/_styles.scss b/styles/_styles.scss
index 313c250..3ea6460 100644
--- a/styles/_styles.scss
+++ b/styles/_styles.scss
@@ -14,9 +14,12 @@ html {
     --header-BackgroundColor: var(--primaryColor);
     --header-textColor: #ffd39c;
     --header-Height: 5.375rem;
+
+    scroll-padding-top: var(--header-Height);
 }
 
 body {
     font-family: 'Questrial', sans-serif;
     background-color: var(--body-BackgroundColor);
+
 }
\ No newline at end of file