js节流函数 + 过渡动画实现回到顶部效果

最新推荐文章于 2023-02-11 11:02:56 发布

1块腹肌

最新推荐文章于 2023-02-11 11:02:56 发布

阅读量287

点赞数

文章标签： js css

本文链接：https://blog.youkuaiyun.com/kuBi_MaNong/article/details/106409580

版权

本文介绍了一种使用节流函数优化滚动事件处理的方法，通过限制代码执行频率，避免了浏览器性能的过度消耗。同时，提供了一个具体的返回顶部功能实现案例，展示了如何在页面滚动超过一定距离时显示返回顶部按钮，并平滑地将页面滚动到顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

节流函数: 我理解的节流就是减少代码的执行频率，保证一段时间内只执行一次代码。

一个返回顶部的案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        max-width: 99%;
        max-height: 500px;
        float: left;
        padding: 20px;
        box-sizing: border-box;
      }
      .backTop {
        position: fixed;
        bottom: 50px;
        right: -150px;
        padding: 10px;
        background-color: #ccc;
        cursor: pointer;
        display: none;
        transition: all 0.5s;
      }
      .backTop:hover {
        background-color: blueviolet;
        color: #fff;
      }
      .box {
        width: 100%;
        height: 550px;
        overflow-y: auto;
        padding-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="backTop">
      回到顶部
    </div>
    <script>
      setTimeout(() => {
        document.querySelector(".box").innerHTML = `
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/01.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/02.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/03.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/04.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/05.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/06.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/07.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/08.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/08/09.jpg"><br>
        <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/01.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/02.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/03.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/04.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/05.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/06.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/07.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/08.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/09.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/10.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/01/07/11.jpg"><br>
          <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/01.jpg"><br>
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/02.jpg"><br>
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/03.jpg"><br>
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/04.jpg"><br>
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/05.jpg"><br>
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/06.jpg"><br>
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/07.jpg"><br>
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/08.jpg"><br>
      <img src="http://pic.topmeizi.com/wp-content/uploads/2017a/04/06/09.jpg">
      `;
      }, 100);
      const box = document.querySelector(".box");
      const backTop = document.querySelector(".backTop");
      let flag = true;
      box.onscroll = () => {
        if (flag) {
          console.log("滚动事件执行代码");
          if (box.scrollTop > 1300) {
            backTop.style.right = "50px";
            backTop.style.display = "block";
          } else {
            backTop.style.right = "-150px";
            backTop.style.display = "block";
          }
          flag = false;
          setTimeout(() => {
            flag = true;
          }, 300);
        }
      };
      backTop.onclick = () => {
        let scrollToptimer = setInterval(function () {
          var top = box.scrollTop;
          var speed = top / 5;
          if (box.scrollTop != 0) {
            box.scrollTop -= speed;
          }
          if (top == 0) {
            clearInterval(scrollToptimer);
          }
        }, 30);
      };
    </script>
  </body>
</html>