Fixed anchoring

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"
     });

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);
+
 }