www(доработка имеющегося функционала): fix autoscroll to anchor

fix autoscroll to anchor

Author: nauchikus

www/components/driver-content-nav/DriverContentNav.tsx

@@ -29,15 +29,17 @@ export const DriverContentNav = observer<IDriverContentNav>( ( { className } ) =
       }
 
       // event.preventDefault();
-        let link = event.target as HTMLLinkElement;
-        let elementId = link.href.replace( /(.*)?#/, `` );
-        let element = document.getElementById( decodeURIComponent( elementId ) ) as HTMLElement;
-        let clientRect = element.getBoundingClientRect();
 
-        window.scrollTo( {
-            top: window.pageYOffset + clientRect.top,
-            left: 0
-        } )
+        console.log( `CHANGE_PAGE_POSITION` );
+      //   let link = event.target as HTMLLinkElement;
+      //   let elementId = link.href.replace( /(.*)?#/, `` );
+      //   let element = document.getElementById( decodeURIComponent( elementId ) ) as HTMLElement;
+      //   let clientRect = element.getBoundingClientRect();
+      //
+      //   window.scrollTo( {
+      //       top: window.pageYOffset + clientRect.top,
+      //       left: 0
+      //   } )
     }
 
 

www/hooks/content-autoscroll-hook.ts

@@ -1,5 +1,6 @@
 import React, {useEffect, useLayoutEffect} from "react";
 import {useRouter} from "next/router";
+import { goToAnchor } from "../utils/scroll.utls";
 
 
 export function useContentAutoscroll(){
@@ -23,6 +24,8 @@ export function useContentAutoscroll(){
         }
 
         function startHashChangeHandler() {
+            let hash = location.hash.slice( 1 );
+            goToAnchor( hash );
             window.addEventListener("scroll", scrollHandler);
         }
 
@@ -37,4 +40,4 @@ export function useContentAutoscroll(){
             window.removeEventListener("scroll", scrollHandler);
         }
     }, []);
-}
+}

www/hooks/use-doc-search.ts

@@ -39,7 +39,7 @@ export const useDocSearch = () => {
 
                     url = url.replace(origin, ``);
 
-                    router.push(url);
+                    router.push( url );
                 }
             }
         });

www/services/ContentNavService.ts

@@ -1,7 +1,7 @@
 import {BOTTOM_CONTENT_INTERSECTION, TOP_CONTENT_INTERSECTION} from "../consts/intersection-observer";
 import {action, computed, makeObservable, observable} from "mobx";
 import {ContentNavItem} from "../models/ContentNav";
-import {Scroll} from "./Scroll";
+import { goToAnchor } from "../utils/scroll.utls";
 
 type ContentNavMetadata = { index: number, elementId: string, path: string, key: string };
 type SetId = string | null | undefined;
@@ -99,20 +99,29 @@ export class ContentNavService {
     private getLastMetadata = () => this.contentNavMetadataAll[this.contentNavMetadataAll.length - 1];
 
     private goToAnchor = (anchor: string) => {
-        function scrollHandler(event) {
-            window.removeEventListener("scroll", scrollHandler);
-
-            window.scrollTo({
-                left: 0,
-            });
-        }
-
-        window.addEventListener("scroll", scrollHandler);
-
-        let sectionId = decodeURIComponent(anchor);
-        let element = document.getElementById<HTMLElement>(`${sectionId}`);
-
-        element.scrollIntoView();
+        goToAnchor( anchor );
+        // function scrollHandler(event) {
+        //     window.removeEventListener("scroll", scrollHandler);
+        //
+        //     window.scrollTo({
+        //         left: 0,
+        //     });
+        // }
+        //
+        // window.addEventListener("scroll", scrollHandler);
+        //
+        // let sectionId = decodeURIComponent(anchor);
+        // let element = document.getElementById(`${sectionId}`);
+        //
+        // console.log( `SCROLL_POSITION` );
+        // element.scrollIntoView();
+          //
+          // let clientRect = element.getBoundingClientRect();
+          //
+          // window.scrollTo( {
+          //     top: window.pageYOffset + clientRect.top,
+          //     left: 0
+          // } )
     }
 
     private getPrevAnchor = (currentelementId: string) => {

www/utils/scroll.utls.ts

@@ -0,0 +1,23 @@
+export function goToAnchor(anchor: string) {
+    function scrollHandler(event) {
+        window.removeEventListener("scroll", scrollHandler);
+
+        window.scrollTo({
+            left: 0,
+        });
+    }
+
+    window.addEventListener("scroll", scrollHandler);
+
+    let sectionId = decodeURIComponent(anchor);
+    let element = document.getElementById(`${sectionId}`);
+
+    // element.scrollIntoView();
+
+    let clientRect = element.getBoundingClientRect();
+
+    window.scrollTo( {
+        top: window.pageYOffset + clientRect.top,
+        left: 0
+    } )
+}