页面滚动时返回顶部按钮无法正常显示/隐藏问题求助

问题分析 #

现有代码仅通过CSS固定了按钮位置，但缺少滚动事件监听逻辑，导致按钮始终显示。要实现“仅向下滚动时显示”，需结合JavaScript控制按钮的显示/隐藏状态，同时调整CSS初始配置。

修改后的完整代码 #

1. CSS 样式（调整初始隐藏+过渡动画）

/*Floating Back-To-Top Button*/
#myBtn {
  --offset: 100px;
  text-decoration: none;
  position: fixed;
  bottom: 10px;
  right: 20px; /* 改用right直接定位，避免left+right冲突 */
  max-width: 100px;
  width: 100%;
  font-size: 15px;
  font-family: sans-serif;
  border-color: rgba(85, 85, 85, 0.2);
  background: #000;
  padding: 8px 12px; /* 增加内边距提升点击体验 */
  border-radius: 100px;
  color: white; /* 把行内样式移到CSS，更规范 */
  opacity: 0; /* 初始隐藏 */
  visibility: hidden; /* 确保元素不可交互 */
  transition: all 0.3s ease; /* 添加过渡动画，显示/隐藏更平滑 */
}

/*On Hover Color Change*/
#myBtn:hover {
  background-color: #7dbbf1;
}

/* 显示按钮的类 */
#myBtn.show {
  opacity: 1;
  visibility: visible;
}

2. HTML 结构（移除行内样式）

<a href="#top" id="myBtn">Back to Top &uarr;</a>

<!-- 你的知识库内容 -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...（省略剩余内容）</p>

3. JavaScript 滚动监听逻辑

// 获取按钮元素
const backToTopBtn = document.getElementById('myBtn');

// 监听滚动事件
window.addEventListener('scroll', () => {
  // 当滚动距离超过200px时显示按钮，否则隐藏
  if (window.scrollY > 200) {
    backToTopBtn.classList.add('show');
  } else {
    backToTopBtn.classList.remove('show');
  }
});

ServiceNow 中添加代码的注意事项 #

1. 在ServiceNow知识库文章的HTML编辑器中，将上述CSS放在<style>标签内，JavaScript放在<script>标签内，HTML内容直接插入。
2. 若遇到脚本不生效，可尝试将JavaScript代码放在文章末尾的<script>标签中，或确认知识库的脚本权限设置。

关键调整点 #

• 用opacity+visibility替代display:none，配合过渡动画提升用户体验
• 简化按钮定位，直接用right:20px避免定位冲突
• 通过scrollY值判断滚动距离，灵活控制按钮显示时机

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