Я создаю приложение реагирования (без реагирующего маршрутизатора) с UIKit для портфеля, и со вчерашнего дня, когда я заканчивал раздел «Мои проекты», страница теперь автоматически прокручивается до этого идентификатора, даже если размещена на Netlify. Навбар имеет привязки к каждому идентификатору, но это определенно не вызывает проблемы (поскольку вся страница работала так, как задумывалось до того, как я вчера реализовал раздел проектов).
/#projects не добавляется в сеть адрес, и я не использую функции window.
Я пытался использовать ловушку useEffect () с window.scrollTo(0,0) внутри, но страница все еще начинается в разделе проектов и затем прокручивается наверх со странным видом.
Это размещенная версия , если вы хотите точно понять, о чем я говорю.
Вот компонент проектов:
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>
);
};
А вот мой код s css для контейнера компонента:
.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%;
}
}
}