react-full-page prevents my page from opening in a certain ID like http://localhost:3000/#someIdWhereIWantThePageToBeOpened

Question

I am using react-full-page and it's working almost fine but there are 2 problems

1. When I am going to some id by clicking in my anchor like <a href='#someId'>Go There</a> it is going but after scroll it is returning to where he was before the click
2. When opening link of the page with an id like http://localhost:3000/#someIdWhereIWantThePageToBeOpened it is staying in the top even when I have disabled scroll by disableScroll.on();

Any suggestions how to fix them? Thanks ahead

Answer 1

const [fullTog, setFullTog] = useState('normal');

let hrefPosition = window
    .location
    .href
    .substring(window.location.href.indexOf("#") + 1, window.location.href.length);
disableScroll.on();
useEffect(() => { 

    if (document.getElementById(hrefPosition) !== null) {
        disableScroll.off();

        let ind = 0;
        let toDeGoTo = setInterval(function () {
            if (ind === 10) {
                clearInterval(toDeGoTo);
                disableScroll.off();
            };
            document
                .getElementById(hrefPosition)
                .scrollIntoView({behavior: 'smooth'});
            ind++;
            console.log(ind);
        }, 200);
    } else {
        console.log(document.getElementById(hrefPosition));

        setTimeout(function () {
            disableScroll.off();
        }, 2000);
    }

    setTimeout(() => {
        setFullTog('full-page');
        disableScroll.off();
    }, 2000);

}, [])