React page is automatically starting scrolled down for some reason - css

Question

I'm creating a react app (w/o react-router) with UIKit for a portfolio, and as of yesterday when I finished my projects section, the page is now automatically scrolling down to that id, even when hosted on Netlify. The navbar has anchors to each id, but this definitely isn't causing the problem (since the whole page worked as intended before I implemented the projects section yesterday).
/#projects is not being appended to the web address, and I am not using any window functions.
I tried using the useEffect() hook with window.scrollTo(0,0) inside, but the page still starts at the projects section and then scrolls to the top with looks odd.
This is the hosted version if you want to see exactly what I'm talking about.
Here's the projects component:
const Projects = () => {
const [selected, setSelected] = useState(proj[0]);
return (
<Fragment>
<div className="projects" id="projects">
<div className="about-head-wrapper">
<h2 className="about-head heading">Projects</h2>
</div>
<MediaQuery minDeviceWidth={1001}>
<div className="projects-container">
<div className="projects-container-buttons">
<button
href="#!"
onClick={() => {
setSelected(proj[0]);
}}
className="project-button"
key={proj[0].title}
autoFocus>
<img src={proj[0].logo} alt="" />
</button>
<button
href="#!"
onClick={() => {
setSelected(proj[1]);
}}
className="project-button"
key={proj[1].title}>
<img src={proj[1].logo} alt="" />
</button>
<button
href="#!"
onClick={() => {
setSelected(proj[2]);
}}
className="project-button"
key={proj[2].title}>
<img src={proj[2].logo} alt="" />
</button>
</div>
<div className="projects-container-splitter" />
<div className="projects-container-info">
<ProjectInfo
title={selected.title}
sc={selected.sc}
desc={selected.desc}
link={selected.link}
/>
</div>
</div>
</MediaQuery>
<MediaQuery maxDeviceWidth={1000}>
<div className="project-accordion-container">
<ul uk-accordion="collapsible: true; animation: false; multiple: true;">
{proj.map((p) => {
return (
<ProjectAccordion
title={p.title}
sc={p.sc}
desc={p.desc}
link={p.link}
logo={p.logo}
key={p.title}
/>
);
})}
</ul>
</div>
</MediaQuery>
</div>
</Fragment>
);
};
And here's my scss code for the component container:
.projects {
height: 100rem;
background-color: #3a4750;
padding-top: 8rem;
#media (max-width: 1000px) {
height: 100%;
padding-bottom: 5rem;
}
&-container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5rem 0;
height: 70rem;
&-buttons {
flex: 0 0 32%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
&-splitter {
flex: 0 0 1px;
height: 60rem;
background-color: white;
transform: rotate(0) scaleY(1);
}
&-info {
flex: 0 0 65%;
}
}
}

Answer 1

Update, I just found an autofocus that accidentally slipped past me. It was in .projects-container-buttons in the first button element that I was using in an old version of the projects component.