如何实现点击圆形按钮滚动到顶部后自动隐藏该按钮？

我来帮你搞定这个小问题！你遇到的核心原因是：点击按钮后执行 window.location = '#' 会触发页面的scroll事件，而你的scroll事件监听里又强制把按钮设为display: block——这就导致按钮刚被隐藏，立刻又被滚动事件给显示出来了，所以得点第二次才会隐藏。

下面是修复后的完整代码，我还顺便优化了一些逻辑：

修复后的HTML（无需修改） #

<div class="divOne"></div>
<div class="circleShape" id="circleShapeId">:)</div>
<div class="divTwo"></div>

优化后的CSS（把固定定位写到CSS里，更合理） #

.circleShape{
 height: 50px;
 background-color: red;
 width: 50px;
 border-radius: 30px;
 text-align: center;
 border: 2px solid white;
 cursor: pointer;
 position: fixed; /* 直接设置固定定位 */
 bottom: 30px; /* 固定在页面左下角，可根据需求调整 */
 left: 30px;
 display: none; /* 初始隐藏 */
}
.divOne {
 height: 300px;
 background-color: yellow;
}
.divTwo{
 height: 300px;
 background-color: pink;
}

修复后的JS（核心逻辑调整） #

const scrollTopBtn = document.getElementById('circleShapeId');

// 根据滚动位置自动显示/隐藏按钮
window.addEventListener('scroll', function() {
  // 当滚动距离超过100px时显示按钮，回到顶部则隐藏
  if (window.scrollY > 100) {
    scrollTopBtn.style.display = "block";
  } else {
    scrollTopBtn.style.display = "none";
  }
});

// 点击按钮平滑滚动到顶部
scrollTopBtn.addEventListener('click', function() {
  // 使用scrollTo实现可控的滚动，替代window.location='#'
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 可选，开启平滑滚动效果，去掉则是瞬间滚动
  });
});

关键改进点： #

• 避免scroll事件冲突：不再强制在scroll事件里显示按钮，而是根据window.scrollY（当前滚动的垂直距离）判断——只有滚动超过一定距离才显示，回到顶部自动隐藏，从根源解决了按钮被重复显示的问题。
• 更合理的滚动方式：用window.scrollTo替代window.location='#'，不仅不会修改URL，还能支持平滑滚动，体验更好。
• 代码简洁性：把按钮元素存为变量，避免重复获取DOM节点；固定定位写到CSS里，JS只负责控制显示状态，职责更清晰。

现在你点击按钮后，页面会滚动到顶部，同时按钮会自动隐藏，不需要再点第二次啦！

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