如何仅使用HTML/CSS实现带动画效果的向下滚动按钮？

结论 #

完全可以仅使用HTML和CSS实现带动画效果的滚动按钮，无需引入JavaScript。

实现核心逻辑 #

• 保留你现有代码中html { scroll-behavior: smooth; }的配置，点击锚点即可触发原生平滑滚动
• 用position: fixed将按钮固定在页面固定位置，不跟随页面滚动
• 通过CSS @keyframes定义按钮的循环动画效果，比如上下浮动、呼吸效果等
• 搭配hover伪类实现鼠标悬浮时的交互反馈

完整可运行代码示例 #

CSS代码

html {
  scroll-behavior: smooth;
}

#section1 {
  height: 800px;
  background-color: red;
}

#section2 {
  height: 800px;
  background-color: blue;
}

/* 滚动按钮样式 */
.scroll-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 12px 24px;
  background-color: #ffffff;
  border-radius: 25px;
  color: #333333;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  /* 绑定浮动动画：2秒时长、缓动、无限循环、交替播放 */
  animation: floatBtn 2s ease-in-out infinite alternate;
}

/* 定义上下浮动动画 */
@keyframes floatBtn {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

/* 鼠标悬浮效果 */
.scroll-btn:hover {
  background-color: #f5f5f5;
  /* 悬浮时暂停动画 */
  animation-play-state: paused;
  transition: background-color 0.3s ease;
}

HTML代码

<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h1>Section 1</h1>
  <a href="#section2">跳转到Section 2</a>
</div>

<div class="main" id="section2">
  <h1>Section 2</h1>
  <a href="#section1">跳转到Section 1</a>
</div>

<!-- 固定悬浮的滚动按钮 -->
<a href="#section1" class="scroll-btn">回到顶部</a>

实现效果说明 #

滚动按钮会固定显示在页面右下角，默认持续上下浮动，鼠标悬浮时动画暂停，点击后会平滑滚动到页面顶部（#section1位置），你也可以根据需求调整按钮的锚点指向、动画效果、样式参数。

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