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

Question

我正在使用 UIKit 为投资组合创建一个 react 应用程序（不带 react-router），截至昨天当我完成我的项目部分时，页面现在自动向下滚动到该 id，即使托管在网络化。导航栏对每个 id 都有锚点，但这绝对不会导致问题（因为在我昨天实施项目部分之前，整个页面都按预期工作）。

/#projects 没有附加到网址，我没有使用任何window 函数。

我尝试使用带有window.scrollTo(0,0) 的useEffect() 钩子，但页面仍然从项目部分开始，然后滚动到顶部，看起来很奇怪。

This is the hosted version如果你想看看我在说什么。

这是项目组件：

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

这是我的组件容器的 scss 代码：

.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

更新，我刚刚发现一个 autofocus 不小心从我身边溜走了。它位于我在旧版本项目组件中使用的第一个按钮元素中的.projects-container-buttons。