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

最新推荐文章于 2023-02-11 11:02:56 发布
最新推荐文章于 2023-02-11 11:02:56 发布
阅读量258 收藏 1
点赞数
文章标签： js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuBi_MaNong/article/details/106409580
版权

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

一个返回顶部的案例

<!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>
1块腹肌
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js练习总结
aohudai3633的博客
08-16 687
1.div返回顶部 当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。 实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。 要点一：document.documentElement.c...
JS实现滑动导航效果
10-15
本篇文章将详细介绍如何使用JavaScript实现一个滑动导航效果，该效果通常用于网站顶部菜单，以提供优雅的用户体验。我们将通过分析给出的代码片段来解析实现这一功能的关键步骤。 首先，HTML结构包含一个带类名为`...
纯js实现页面返回顶部的动画(超简单)
10-19
下面小编就为大家带来一篇纯js实现页面返回顶部的动画(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
返回顶部JS
weixin_33757609的博客
03-13 115
CSS #back-to-top{ position: fixed; bottom:20px; right: 20px; } JS var backBtn=$("#back-to-top"); function backToTop() { $("html,body").animate({ scrollTop: 0 ...
js 返回顶部
探索丶挑战丶突破
03-29 203
组件及代码下载：http://www.17sucai.com/pins/tag/910.html
JS返回顶部
才这么点的博客
05-14 115
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
JS实现的点击按钮图片上下滚动效果示例
10-17
在JavaScript中，实现点击按钮图片上下滚动的效果是一个常见的交互功能，常常用于轮播图或滚动展示内容。...同时，这个示例也展示了如何结合CSS和JavaScript实现简单的动画效果，对于提升用户体验有着积极的影响。
弹性返回顶部JS特效代码
03-20
这种特效主要使用JavaScript（JS）语言实现，结合CSS来控制视觉效果，以实现平滑、弹性的动画过渡。 JS（JavaScript）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，负责处理用户的交互、动态内容...
web 滑动回到顶部 jquery
05-14
- 增加动画效果：可以使用jQuery的`fadeToggle`或`slideToggle`方法，使按钮的显示和隐藏具有过渡效果。 - 防抖（debounce）和节流（throttle）：当用户频繁滚动时，可以采用这些技术减少函数调用，提高性能。 - ...
JS动态平滑滚动菜单效果特效代码
03-20
JavaScript（简称JS）是一种轻量级的编程语言，广泛用于网页和网络应用的开发，尤其在实现用户交互、页面动态效果方面发挥着重要作用。在网页设计中，动态平滑滚动菜单是提升用户体验的一种常见手法。它能够让用户在...
利用js实现返回页面顶部
04-20
NULL 博文链接：https://ihenu.iteye.com/blog/1885565
JS返回顶部代码
11-09
JS效果返回顶部代码，学习时写的，如有问题请留言。javascript返回顶部代码
js实现返回顶部效果
10-20
本文主要介绍了js实现返回顶部效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
js动态返回顶部
12-26
把引用的JS文件放在div标签下面 <div id="gotop">返回顶部</div> [removed][removed]
CSS3动画返回顶部按钮代码.zip
07-05
CSS3动画返回顶部按钮代码一款当在用户向下滚动页面一段距离之后，会以CSS3动画方式出现返回顶部按钮。点击返回顶部按钮之后，页面以平滑的方式滚动回顶部的返回顶部插件jquery.gototop。
js返回页面顶部
cxc709467878的博客
09-28 106
<style> *{ margin:0; padding:0; text-decoration:none; } a{ color:#fff; } div{ width:100%; height:400px; } </style> <divstyle="backgro...
JS返回顶部功能
zhaoyifei01的博客
02-11 165
JS顶部返回功能
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 739
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js简单的返回顶部
VibMike的博客
06-20 6239
1、一般这种都伴随着浏览器离开顶部后出现回到顶部的div，然后点击div回到顶部，然后判断你的页面处于浏览器顶部，隐藏你的回到顶部按钮，需要去判断你的浏览器是否位于顶部csdn的回到顶部按钮2、我实现的思路比较简单，写一个透明的，高度只有1像素的div放在最顶上，让js判断浏览器窗口的高度是否大于div的高度，大于就显示你的回到顶部，小于就隐藏3、写一个用来回滚到顶部的按钮，设置样式并固定它在你想要固定的高度上（浏览器窗口）4、写一个div撑开浏览器高度（页面原来够高出现滚动条忽略这个）5、js部分，先获取
Js实现防抖函数喝节流函数
最新发布
03-31
当我们在JavaScript中处理一些频繁触发的事件时，比如窗口调整大小、滚动等，防抖函数和节流函数可以帮助我们优化性能。 防抖函数（Debounce）是指在事件触发后等待一段时间后再执行回调函数，如果在等待时间内再次触发了该事件，则重新计时。这样可以避免频繁触发事件导致的性能问题。 以下是一个简单的JavaScript实现防抖函数的例子： ```javascript function debounce(func, delay) { let timer; return function() { clearTimeout(timer); timer = setTimeout(func, delay); }; } ``` 在上面的例子中，`debounce`函数接受两个参数：`func`是要执行的回调函数，`delay`是等待的时间间隔。返回的函数会在事件触发后等待`delay`毫秒后执行回调函数。 节流函数（Throttle）是指在一定时间间隔内只执行一次回调函数，无论事件触发多频繁。这样可以控制事件的触发频率，避免过多的计算和渲染。 以下是一个简单的JavaScript实现节流函数的例子： ```javascript function throttle(func, delay) { let timer; return function() { if (!timer) { timer = setTimeout(() => { func(); timer = null; }, delay); } }; } ``` 在上面的例子中，`throttle`函数接受两个参数：`func`是要执行的回调函数，`delay`是时间间隔。返回的函数会在事件触发后等待`delay`毫秒后执行回调函数，但如果在等待时间内再次触发了该事件，则不会重新计时。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值