js实现带有动画的返回顶部

2023年6月10日下午10:41 • JavaScript

这里就为你详细讲解JavaScript实现带有动画的返回顶部的完整攻略。

基本思路

要实现返回顶部，我们可以通过设置按钮的点击事件或者监听滚动事件。而动画效果就需要用到CSS3中的transition属性。具体而言，可以通过以下步骤来实现：

设置当页面向下滚动一定的距离时，返回顶部按钮的样式显示出来；
给返回顶部按钮设置点击事件，在事件函数中实现滚动动画效果；
通过JS获取页面当前滚动的高度，并实现滚动动画效果。

代码实现

首先，在HTML中加入返回顶部的按钮：

<a href="#" id="back-to-top-btn">返回顶部</a>

接着，在CSS中设置按钮的样式，包括显示隐藏和动画效果等：

#back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

#back-to-top-btn.show {
  display: inline-block;
  opacity: 1;
}

其中，当按钮的class属性被设置为show时，会使按钮显示出来。

最后，在JS中根据滚动位置控制返回顶部按钮的显示和隐藏，并添加动画效果：

// 获取返回顶部按钮
var backToTopBtn = document.getElementById("back-to-top-btn");

// 监听页面滚动
document.addEventListener("scroll", function (e) {
  // 计算页面滚动高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

  // 当滚动到一定高度时，显示按钮；否则，隐藏按钮
  if (scrollTop >= 500) {
    backToTopBtn.classList.add("show");
  } else {
    backToTopBtn.classList.remove("show");
  }
});

// 点击按钮实现滚动效果
backToTopBtn.addEventListener("click", function (e) {
  // 获取当前的滚动高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var step = scrollTop / 30; // 每30帧滚动的距离

  // 使用requestAnimationFrame实现动画效果
  function animation() {
    if (scrollTop > 0) {
      scrollTop -= step;
      document.documentElement.scrollTop = scrollTop;
      document.body.scrollTop = scrollTop;
      requestAnimationFrame(animation);
    }
  }
  requestAnimationFrame(animation);

  // 阻止该元素的默认行为
  e.preventDefault();
});

完成以上代码的编写后，我们即可在网页中实现带有动画的返回顶部功能。

示例说明

示例一

下面是一个简易的示例，展示了如何用JS实现带有动画的返回顶部按钮。

示例二

以下是另一个示例，展示了如何使用jQuery实现“返回顶部”按钮。

<a id="back-to-top-btn"><i class="icon-up-open"></i></a>

$(function () {
  // 返回顶部按钮的显示和隐藏
  $(window).scroll(function () {
    if ($(window).scrollTop() > 250) {
      $("#back-to-top-btn").fadeIn();
    } else {
      $("#back-to-top-btn").fadeOut();
    }
  });

  // 点击按钮实现滚动效果
  $("#back-to-top-btn").click(function (e) {
    $("body,html").animate({ scrollTop: 0 }, 800);
    e.preventDefault();
  });
});

在这个示例中，使用了jQuery的scroll()方法和animate()方法，实现了返回顶部按钮的显示隐藏和动画效果。