制作一个滚动至顶部按钮

2024-01-09 04:28:41

在网页设计中，滚动至顶部按钮是一种常见的用户界面元素，允许用户轻松返回页面的顶部位置。本篇博客将向您展示如何制作一个滚动至顶部按钮，并附上相应的 HTML、CSS 和 JavaScript 代码。

目录

创建 HTML 结构

添加 CSS 样式

添加 JavaScript 代码

结论

以下是完整代码：

创建 HTML 结构

首先，在?<body>?标签中添加四个具有不同背景颜色的?<div>?元素，作为滚动效果的演示区域。以下是相应的 HTML 代码：

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

添加 CSS 样式

在?<head>?标签中，将以下 CSS 代码添加到?<style>?标签中以定义滚动至顶部按钮的样式以及演示区域的样式。

#scrollToTop {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  font-size: 30px;
  line-height: 50px;
  background-color: rosybrown;
  transition: background-color 0.3s, transform 0.3s;
}

#scrollToTop img {
  width: 50px;
  height: 50px;
}

#scrollToTop:hover {
  transform: scale(1.1);
}

.box1 {
  height: 500px;
  width: 500px;
  background-color: aqua;
}

.box2 {
  height: 500px;
  width: 500px;
  background-color: fuchsia;
}

.box3 {
  height: 500px;
  width: 500px;
  background-color: yellowgreen;
}

.box4 {
  height: 500px;
  width: 500px;
  background-color: orangered;
}

添加 JavaScript 代码

在?<body>?标签的末尾，将以下 JavaScript 代码添加到?<script>?标签中以实现滚动至顶部按钮的显示与隐藏，以及点击按钮后页面滚动至顶部：

window.onscroll = function() {
  scrollFunction();
};

function scrollFunction() {
  var scrollToTopButton = document.getElementById("scrollToTop");
  if (
    document.body.scrollTop > 500 ||
    document.documentElement.scrollTop > 500
  ) {
    scrollToTopButton.style.display = "block";
  } else {
    scrollToTopButton.style.display = "none";
  }
}

function scrollToTop() {
  var currentScroll =
    document.documentElement.scrollTop || document.body.scrollTop;

  if (currentScroll > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, currentScroll - currentScroll / 8);
    // 您可以调整除数以获得更快或更慢的滚动
  }
}

结论

随着本篇博客的实施，您已经成功地制作了一个滚动至顶部按钮。您可以通过在滚动页面时观察按钮的显示和隐藏状态，以及点击按钮后页面的滚动行为来验证其功能。

希望这篇博客对您有所帮助，祝您在网页设计中取得更多成功！

如果您有任何其他问题，请随时向我提问。

以下是完整代码：

<!DOCTYPE html>
<html>

<head>
  <title>Scroll to Top Button</title>
  <style>
    #scrollToTop {
      display: none;
      position: fixed;
      bottom: 50px;
      right: 20px;
      width: 50px;
      height: 50px;
      text-align: center;
      border-radius: 50%;
      cursor: pointer;
      font-size: 30px;
      line-height: 50px;
      background-color: rosybrown;
      transition: background-color 0.3s, transform 0.3s;
    }

    #scrollToTop img {
      width: 50px;
      height: 50px;
    }

    #scrollToTop:hover {
      transform: scale(1.1);
    }

    .box1 {
      height: 500px;
      width: 500px;
      background-color: aqua;
    }

    .box2 {
      height: 500px;
      width: 500px;
      background-color: fuchsia;
    }

    .box3 {
      height: 500px;
      width: 500px;
      background-color: yellowgreen;
    }

    .box4 {
      height: 500px;
      width: 500px;
      background-color: orangered;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div id="scrollToTop" onclick="scrollToTop()">
    <span style="line-height: 50px;">&#8593;</span>
  </div>

  <script>
    window.onscroll = function () {
      scrollFunction();
    };

    function scrollFunction() {
      var scrollToTopButton = document.getElementById("scrollToTop");
      if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
        scrollToTopButton.style.display = "block";
      } else {
        scrollToTopButton.style.display = "none";
      }
    }

    function scrollToTop() {
      var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

      if (currentScroll > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, currentScroll - currentScroll / 8); // 您可以调整除数以获得更快或更慢的滚动
      }
    }
  </script>
</body>

</html>

文章来源:https://blog.csdn.net/2301_76675652/article/details/135426404
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。