react-full-page is causing my webpage to not open in a specific ID location, such as http://localhost:3000/#someIdWhereIWantThePageToBeOpened

Question

react-full-page is causing my webpage to not open in a specific ID location, such as http://localhost:3000/#someIdWhereIWantThePageToBeOpened

I'm currently utilizing the react-full-page package and while it's almost working well, I've come across two issues:

After clicking on an anchor link like
```
<a href='#someId'>Go There</a>
```
, the scroll goes to the designated id but then jumps back to where it was before the click.
When opening a page link with an id like
```
http://localhost:3000/#someIdWhereIWantThePageToBeOpened
```
, the page stays at the top despite having disabled scrolling with disableScroll.on();.

Any suggestions on how to resolve these problems would be greatly appreciated. Thank you in advance!

javascript html css reactjs scroll

Answer 1

Answer №1

let [toggleStatus, setToggleStatus] = useState('normal');

const position = window
    .location
    .href
    .substring(window.location.href.indexOf("&") + 1, window.location.href.length);
disableScroll.on();
useEffect(() => { 
    if (document.getElementById(position) !== null) {
        disableScroll.off();
        let index = 0;
        let scrollInterval = setInterval(function () {
            if (index === 10) {
                clearInterval(scrollInterval);
                disableScroll.off();
            };
            document
                .getElementById(position)
                .scrollIntoView({behavior: 'smooth'});
            index++;
            console.log(index);
        }, 200);
    } else {
        console.log(document.getElementById(position));
        setTimeout(function () {
            disableScroll.off();
        }, 2000);
    }
    setTimeout(() => {
        setToggleStatus('full-page');
        disableScroll.off();
    }, 2000);
}, [])

Answer 2

let [toggleStatus, setToggleStatus] = useState('normal');

const position = window
    .location
    .href
    .substring(window.location.href.indexOf("&") + 1, window.location.href.length);
disableScroll.on();
useEffect(() => { 
    if (document.getElementById(position) !== null) {
        disableScroll.off();
        let index = 0;
        let scrollInterval = setInterval(function () {
            if (index === 10) {
                clearInterval(scrollInterval);
                disableScroll.off();
            };
            document
                .getElementById(position)
                .scrollIntoView({behavior: 'smooth'});
            index++;
            console.log(index);
        }, 200);
    } else {
        console.log(document.getElementById(position));
        setTimeout(function () {
            disableScroll.off();
        }, 2000);
    }
    setTimeout(() => {
        setToggleStatus('full-page');
        disableScroll.off();
    }, 2000);
}, [])

react-full-page is causing my webpage to not open in a specific ID location, such as http://localhost:3000/#someIdWhereIWantThePageToBeOpened

Answer №1

Similar questions

Initial button click fails to trigger onclick event

Encountering a 404 error when attempting to make an Axios post request

selectize.js typescript: Unable to access values of an undefined object (reading '0')

Ways to assign a default background shade to a webpage with a transparent background

JavaScript: Specialized gravity diagram

Utilize CSS to selectively target specific sections of a repetitive pattern within a list

Ways to deactivate remaining buttons until a function call finishes after selecting one in a react render() function?

Halt the program's process until the ajax request has finished

Ensuring Consistent Vertical Spacing for CSS-Animated Bootstrap 5 Navbar Toggler Buttons in All Browsers

What is the process for obtaining a push key in Firebase?

Display elements on hover of thumbnails using CSS

Avoiding memory leaks in Reactjs when canceling a subscription in an async promise

Undefined global variable

Strange glitch in the Trebuchet MS font

Default file is still generated by Sass even when variables are modified

How can I store HTML5 input type date/time data accurately as Date Time in Rails?

"Enhance your website with the magic of jQuery magnific-popup

Guide to Designing a Three-Column Layout Using Only CSS

unable to call the anonymous inline onclick method of JavaScript

Node scripts and node bins are causing errors in Vue.js when running npm