原生js模仿jquery Scroll动画

你的名字 2022-04-11 02:45 273阅读 0赞

有时候我们在vue项目中需要用到有关scroll的动画,但是又没jquery那样的animate简单的动画方法,又要避免引入jquery的包导致过大,于是就用原生js模仿一个:(可用于返回顶部,锚点动画等)

selector此参数为id名,可直接调用该点击事件

goAnchor(selector) {
          let anchor = this.$el.querySelector(selector);
          let total = anchor.offsetTop;
          let distance = document.documentElement.scrollTop || document.body.scrollTop;
          let step = total / 50;
          if (total > distance) {
            smoothDown();
          } else {
            let newTotal = distance - total;
            step = newTotal / 50;
            smoothUp();
          }
          function smoothDown() {
            if (distance < total) {
              distance += step;
              document.body.scrollTop = distance;
              document.documentElement.scrollTop = distance;
              setTimeout(smoothDown, 10);//自定义时间
            } else {
              document.body.scrollTop = total;
              document.documentElement.scrollTop = total;
            }
          }
          function smoothUp() {
            if (distance > total) {
              distance -= step;
              document.body.scrollTop = distance;
              document.documentElement.scrollTop = distance;
              setTimeout(smoothUp, 10);
            } else {
              document.body.scrollTop = total;
              document.documentElement.scrollTop = total;
            }
          }
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS能模仿键盘输入吗

是的，原生JS可以模拟键盘输入。可以使用JavaScript中的事件来模拟按键事件，例如keydown、keyup和keypress事件。通过使用这些事件，可以触发指定键的按下

雨点打透心脏的1/2处/ 2024年03月25日 04:05/ 0 赞/ 39 阅读

相关原生js实现移动动画，变化动画

初生牛犊不怕虎，想用博客来记录自己以前的一些学习经历，对您有帮助的话请留下你们的赞哦！话不多说进入正题首先我们应该怎么用原生js实现动画，思路是这样的 1. 通过某

浅浅的花香味﹌/ 2023年06月29日 10:53/ 0 赞/ 9 阅读

相关持续动画---css、js、jQuery

css实现持续动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti

你的名字/ 2023年06月27日 08:36/ 0 赞/ 1 阅读

相关 js 原生实现 jQuery ajax

js 原生实现 jquery ajax 主要依靠 XMLHttpRequest 对象，该对象使用如下 1、介绍创建 XMLHttpRequest 对象的语法：

我会带着你远行/ 2023年02月13日 11:13/ 0 赞/ 14 阅读

相关 js模仿微信语音播放的动画效果

设计思路: 播放时使用js的setInterval来替换png达到动画效果当前demo语音播放使用插件BenzAMRRecorder.js 如需要用其它js插件来播放语音

缺乏、安全感/ 2022年09月11日 14:13/ 0 赞/ 286 阅读

相关 css js jquery移动动画

文章目录 1.代码 2.参考博客： 1.代码 .productChange { position: abso

客官°小女子只卖身不卖艺/ 2022年09月08日 11:57/ 0 赞/ 152 阅读

相关原生js简单实现jQuery的动画效果

// 动画效果 function startMove(obj,json,fn){ clearInterval(obj.timer); var

偏执的太偏执、/ 2022年06月03日 05:35/ 0 赞/ 201 阅读

相关原生js模仿京东图片放大镜效果

实现放大镜效果，是需要两张图片，记得两张图片的比例要保持一致哦嗯，挺简单的，所以直接上代码喽，有不懂的可以评论区留言哦 <!DOCTYPE html> <

本是古典何须时尚/ 2022年05月29日 12:21/ 0 赞/ 285 阅读

相关 jQuery_原生JS局限性

原生JS还是有一定的局限性 1.事件覆盖比如说： window.onload = function(）{} 一个页面只能有一个，再写一个window,onlo

女爷i/ 2022年05月22日 12:18/ 0 赞/ 151 阅读

相关原生js模仿jquery Scroll动画

有时候我们在vue项目中需要用到有关scroll的动画,但是又没jquery那样的animate简单的动画方法,又要避免引入jquery的包导致过大,于是就用原生js模仿一个:

你的名字/ 2022年04月11日 02:45/ 0 赞/ 274 阅读