如何在 HTML 中添加返回顶部按钮

在网页制作中，经常会出现很长的页面，这时候添加一个返回顶部按钮可以方便用户快速回到页面顶部。本文将介绍如何在 HTML 中添加返回顶部按钮。

方法一：使用原生 JavaScript

使用原生 JavaScript 实现返回顶部按钮的效果比较简单，只需要监听滚动事件，当滚动到一定高度时显示返回按钮，点击按钮将页面滚动到顶部即可。

步骤

1. 添加一个按钮元素和相应的样式：

<button id="back-to-top">返回顶部</button>

<style>
  #back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    cursor: pointer;
  }
</style>

2. 添加 JavaScript 代码：

<script>
  var backToTopBtn = document.getElementById("back-to-top");

  window.onscroll = function() {
    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollHeight > 100) {
      backToTopBtn.style.display = "block";
    } else {
      backToTopBtn.style.display = "none";
    }
  }

  backToTopBtn.onclick = function() {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
  }
</script>

解释

1. 首先通过 getElementById 方法获取到返回顶部的按钮元素；
2. 在窗口滚动事件中，通过 scrollTop 属性获取当前滚动距离，判断是否超过指定的高度；
3. 如果超过则显示返回按钮，否则隐藏；
4. 当点击按钮时，将 scrollTop 属性设置为 0，即可使页面滚动到顶部。

方法二：使用 jQuery 库

如果你使用了 jQuery 库，添加返回顶部按钮的效果会更加简单。jQuery 提供了 scrollTop 和 animate 方法可以轻松实现滚动和动画效果。

步骤

1. 添加一个按钮元素和相应的样式（同方法一）；
2. 引入 jQuery 库：

<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

3. 添加 JavaScript 代码：

<script>
  $(function() {
    $(window).scroll(function() {
      if ($(this).scrollTop() > 100) {
        $("#back-to-top").fadeIn();
      } else {
        $("#back-to-top").fadeOut();
      }
    });
    $("#back-to-top").click(function() {
      $("html, body").animate({
        scrollTop: 0
      }, 500);
      return false;
    });
  });
</script>

解释

1. 首先在 $(function() { ... }); 中添加代码，确保页面加载完毕后再执行；
2. 监听 scroll 事件，当滚动高度超过 100 时显示返回按钮，否则隐藏；
3. 当点击返回按钮时，使用 animate 方法使页面滚动到顶部，且执行动画效果。

结语

通过以上两种方法我们可以方便地为网页添加返回顶部按钮。不同的实现方式适用于不同的场景和需求，我们可以根据具体情况选择。