vue项目tween方法实现返回顶部

最新推荐文章于 2024-08-02 18:58:28 发布

zzm_

最新推荐文章于 2024-08-02 18:58:28 发布

阅读量240

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000013417915

版权

一、场景

当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用document.body.scrollTop =0；这么写就实现了功能，不过要更加的细腻一点我们不妨用tween的缓动来实现，看看效果如何吧。
之前我们写过tween的相关文章，这里不做介绍了。

二、代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <style type="text/css">
            #app{width: 100%; height: 3000px;background: #CCCCCC;}
            .backTop{
                width: 1.5rem;
                height: 1.5rem;
                border: 1px solid #ff0000;
                position: fixed;
                right: 1rem;
                bottom: 2rem;
                border-radius: 50%;
                /*background: url(/static/imgs/backtop20180226.png) no-repeat 40%;*/
                background-size: 70% 100%;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div @click="backTop()" class="backTop">Top</div>
        </div>
        
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    backTop(){
//                         * t: current time（当前时间）；
//                         * b: beginning value（初始值）；
//                         * c: change in value（变化量）；
//                         * d: duration（持续时间）。
                        var Tween = {
                            Linear: function(t, b, c, d) { //匀速运动，想要实现其他的效果可以使用tween的其他方法
                                return c * t / d + b; 
                            }
                        }
                        Math.tween = Tween;
                        var t = 1;
                        const b = document.documentElement.scrollTop;
                        const c = 50;
                        const d = 5;
                        const setInt = setInterval(()=>{
                            t--;
                            console.log(t)
                            if(document.documentElement.scrollTop == 0){clearInterval(setInt)}
                            console.log(t);
                            const backTop = Tween.Linear(t,b,c,d);
                             console.log(backTop);
                            document.documentElement.scrollTop = backTop;
                        },20)
                    }
                }
            })
        </script>
    </body>
</html>

三、requestAnimationFrame改写setInterval方法：

methods:{
            backTop(){
                var Tween = {
                    Linear: function(t, b, c, d) { //匀速
                        return c * t / d + b; 
                    }
                }
                Math.tween = Tween;
                var t = 1;
                const b = document.body.scrollTop;
                const c = 1;
                const d = 1;
                var timer;
                timer= requestAnimationFrame(function fn(){
                    if(document.body.scrollTop > 0){
                        t--;
                        console.log(t)
                        console.log(t);
                        const backTop = Tween.Linear(t,b,c,d);
                         console.log(backTop);
                        document.body.scrollTop = backTop;
                        timer = requestAnimationFrame(fn);
                    }else{
                        cancelAnimationFrame(timer)
                    }
                })
            }
        }

jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <style type="text/css">
            #app {
                width: 100%;
                height: 3000px;
                background: #CCCCCC;
            }
            .backTop {
                width: 1.5rem;
                height: 1.5rem;
                border: 1px solid #ff0000;
                position: fixed;
                right: 1rem;
                bottom: 2rem;
                border-radius: 50%;
                /*background: url(/static/imgs/backtop20180226.png) no-repeat 40%;*/
                background-size: 70% 100%;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div class="backTop">Top</div>
        </div>

        <script type="text/javascript">
            $(".backTop").click(function() {
                console.log(11)
                var Tween = {
                    Linear: function(t, b, c, d) { //匀速运动，想要实现其他的效果可以使用tween的其他方法
                        return c * t / d + b;
                    }
                }
                Math.tween = Tween;
                var t = 1;
                const b = document.documentElement.scrollTop;
                const c = 50;
                const d = 5;
                const setInt = setInterval(() => {
                    t--;
                    console.log(t)
                    if(document.documentElement.scrollTop == 0) {
                        clearInterval(setInt)
                    }
                    console.log(t);
                    const backTop = Tween.Linear(t, b, c, d);
                    console.log(backTop);
                    document.documentElement.scrollTop = backTop;
                }, 20)
            })
        </script>
    </body>
</html>