如何用css fixed制作返回顶部按钮

35次阅读

使用HTML创建按钮并用CSS的position: fixed将其固定在右下角，初始隐藏；2. 通过JavaScript监听滚动事件，滚动超过300px时显示按钮；3. 点击按钮时调用scrollTo实现平滑返回顶部；4. 添加aria-label提升可访问性，确保响应式兼容。

返回顶部按钮是提升网页用户体验的常见功能，使用 CSS 的 position: fixed 可以让按钮始终显示在浏览器视窗的固定位置（比如右下角），无论页面如何滚动。下面教你一步步实现一个简洁实用的返回顶部按钮。

1. 创建返回顶部按钮的 HTML 结构

在页面底部或其他合适位置添加一个按钮元素：

2. 使用 CSS fixed 定位按钮

通过 position: fixed 将按钮固定在视窗右下角：

Playground

Playground 是一个AI绘画创作和图片编辑平台，每天可以免费创建100张各种类型的艺术图片，还提供背景消除、局部更换等图片编辑工具

175

查看详情

#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#backToTop.show {
opacity: 1;
}

说明：
– fixed 让按钮脱离文档流，始终相对于浏览器窗口定位。
– 初始 opacity: 0 隐藏按钮，只在需要时显示。
– 添加 transition 实现淡入淡出动画效果。

3. 用 JavaScript 控制显示与滚动行为

当用户向下滚动一定距离后，显示按钮；点击按钮时平滑返回顶部：

立即学习“前端免费学习笔记（深入）”；

window.addEventListener(‘scroll’, () => {
  if (window.pageYOffset > 300) {
    backToTopButton.classList.add(‘show’);
  } else {
    backToTopButton.classList.remove(‘show’);
  }
});

backToTopButton.addEventListener(‘click’, () => {
  window.scrollTo({
    top: 0,
    behavior: ‘smooth’
  });
});
</script>

说明：
– 监听 scroll 事件，当滚动超过 300px 时显示按钮。
– 使用 scrollTo 配合 behavior: smooth 实现平滑滚动。