vue（js的setInterval函数实现）回到顶部

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

真狠白的小白

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

阅读量296

点赞数

分类专栏：笔记文章标签： js vue

本文链接：https://blog.csdn.net/weixin_45048360/article/details/115263179

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

该博客介绍了JavaScript的setInterval方法，用于按照指定周期调用函数。文中以一个具体的实例展示了如何使用setInterval创建一个滚动回到顶部的功能，通过不断调整滚动位置，并在滚动到顶部时使用clearInterval停止滚动。此实例有助于理解定时器在前端开发中的应用。

摘要由CSDN通过智能技术生成

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])

参数

code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

实例

backTop(){
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        console.log(document.documentElement.scrollTop);
        if (document.documentElement.scrollTop === 0 || document.body.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 300)
    }
    ```