如何使用原生JavaScript实现点击按钮后搜索栏div移动到页面顶部

问题根因 #

你当前代码里没有把「移除center类」的逻辑加入到表单提交的事件监听流程中，同时缺少移除center类后容器的默认布局样式，才会导致功能不生效。

具体修改方案 #

1. 在表单提交事件中添加移除类的逻辑
   找到你代码里的submit事件监听回调，在阻止默认行为之后新增移除center类的代码：

form.addEventListener('submit', async function (e) {
    e.preventDefault();
    // 新增这一行，移除container的center类
    div.classList.remove('center');
    reset();
    const showName = form.elements.query.value;
    const config = { params: { q: showName } }
    const res = await axios.get(`https://api.tvmaze.com/search/shows?q=`, config)
    display(res.data);
    form.elements.query.value = '';
});

2. 补充CSS样式，保证移除类后容器布局正常
   你当前的.center类用了绝对定位居中，移除类后需要给#container设置默认的正常布局样式，在CSS里新增：

#container {
    position: static;
    margin: 2rem auto;
    width: fit-content;
}

3. 排查验证点
   如果修改后还是不生效，确认两个点：

• 你的HTML结构中，center类是否确实加在id为container的元素上，而不是加在form元素本身
• 元素id没有拼写错误，JS获取的div元素确实是你要修改的搜索栏外层容器

内容的提问来源于stack exchange，提问作者freddyk