I am trying to create a button that scrolls to the next section of the page regardless of the current section and how a user has gotten there.
(Currently, the button goes to the next section, but if the user scrolls to a new section by scrolling and not clicking the button, the current section is not updated and clicking the button will lead to the wrong section).
How can I track the current section being viewed when a users scrolls to access it and when the button is clicked? I currently have a React app that renders a number of components all at once. Each component is a section, all of which are held in a container div. Each section is 100vh (like a new page) and I would like to go to a new page when clicking the button or scrolling.
the current code is below:
const [currentSection, setCurrentSection] = useState(1)
const sections = {
1 : '#home',
2 : '#two',
3 : '#three',
4 : '#four',
5 : '#five'
};
…inside of the return
{currentSection <= 5 &&
<div className='scroll-down'>
<a href={`${sections[currentSection]}`} onClick={() => setCurrentSection(currentSection + 1)}>
<button id="btnScroll" >
<i className='material-icons'>arrow_downward</i>
</button>
</a>
</div>
}
<div className='container'>
<Home/>
<Philosophy/>
<Experience/>
<Projects/>
<Contact/>
</div>