返回顶部滚动动画 jquery

📌 相关文章

📜 返回顶部滚动动画 jquery - Javascript (1)

📅 最后修改于: 2023-12-03 14:57:56.549000 🧑 作者: Mango

在网页后退到底部或是浏览过程中滚动到页面的底部时，返回到页面的顶部是很常见的需求。这个需求很容易实现，并且可以添加一些动画效果来使其更加流畅。

在这篇文章中，我们将使用jQuery来实现返回顶部滚动动画功能。以下是实现过程中需要的代码和解释。

HTML结构

我们需要一个按钮来返回到页面顶部，在按钮上添加一个标识className以便查找。例如:

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

CSS样式

在CSS中，我们给按钮添加一些基本样式，隐藏起来，并添加一些鼠标移动到上面时的样式。

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: #0094ff;
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  cursor: pointer;
}

.back-to-top:hover {
  background-color: #32aaff;
}

JavaScript

在JavaScript中，我们需要添加一个事件监听器，以便在滚动时显示/隐藏按钮。当按钮被点击时，我们需要将页面滚动到页面顶部，并添加一个动画效果。

$(document).ready(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},800);
    return false;
  });
  
});

我们在文档准备好时绑定一个事件监听器，在滚动时检查页面的scrollTop值是否大于100，如果是，则显示按钮，否则隐藏按钮。当按钮被点击时，我们使用animate()函数将页面滚动到页面顶部，并添加一个800毫秒的动画效果。

完整代码

这里是完整的代码，可以直接复制粘贴在你的项目中：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>返回顶部滚动动画 jQuery</title>
  <style>
    .back-to-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
      background-color: #0094ff;
      color: #fff;
      font-size: 16px;
      padding: 10px 15px;
      cursor: pointer;
    }

    .back-to-top:hover {
      background-color: #32aaff;
    }
  </style>
</head>
<body>
  <button class="back-to-top">返回顶部</button>
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(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},800);
        return false;
      });
      
    });
  </script>
</body>
</html>

希望这个简短的教程能帮到你。返回顶部滚动动画是一个非常常见的需求，实现起来也相当简单。