33 lines
706 B
TypeScript
33 lines
706 B
TypeScript
|
import { useMemo, useEffect } from "react";
|
||
|
|
import { useLocation } from "react-router-dom";
|
||
|
|
|
||
|
|
export const ScrollToHashElement = () => {
|
||
|
|
let location = useLocation();
|
||
|
|
|
||
|
|
let hashElement = useMemo(() => {
|
||
|
|
let hash = location.hash;
|
||
|
|
const removeHashCharacter = (str: string) => {
|
||
|
|
const result = str.slice(1);
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (hash) {
|
||
|
|
let element = document.getElementById(removeHashCharacter(hash));
|
||
|
|
return element;
|
||
|
|
} else {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}, [location]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (hashElement) {
|
||
|
|
hashElement.scrollIntoView({
|
||
|
|
behavior: "smooth",
|
||
|
|
inline: "nearest",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, [hashElement]);
|
||
|
|
|
||
|
|
return null;
|
||
|
|
};
|