Css 由于某种原因，React页面自动开始向下滚动

我正在为一个公文包创建一个带有UIKit的react应用程序（w/o react router），从昨天我完成我的项目部分开始，页面现在自动向下滚动到该id，即使在Netlify上托管。导航栏对每个id都有锚定，但这肯定不会造成问题（因为在我昨天实现项目部分之前，整个页面都按预期工作）

/#projects

没有附加到网址，我也没有使用任何

窗口

功能

我尝试在

window.scrollTo（0,0）

内部使用useffect（）钩子，但是页面仍然从projects部分开始，然后滚动到顶部，看起来很奇怪

如果你想知道我在说什么

以下是项目组件：

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>
    );
};

---

更新，我刚刚发现一个

自动对焦

不小心从我身边滑过。它位于

.projects container buttons

中的第一个按钮元素中，我在项目组件的旧版本中使用了该元素。

我查看了您的站点。你是如何建立导航栏的？您是否可以将项目设置为默认活动状态？实际上，有一个html自动对焦放在我错过的一个按钮元素中，但是谢谢！

.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%;
        }
    }
}