js利用定时器使当前页面缓慢移动到指定位置

最新推荐文章于 2023-12-25 19:19:29 发布

原创最新推荐文章于 2023-12-25 19:19:29 发布 · 1.1k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

JS 同时被 2 个专栏收录

40 篇文章

订阅专栏

Vue

12 篇文章

订阅专栏

本文介绍如何在Vue项目中，通过点击元素并利用定时器，实现页面缓慢且平滑地滚动到指定位置。核心是利用JavaScript来控制滚动行为。

需求是点击当前页面某一元素，结合定时器使页面缓慢移动到指定位置。说明一下，我这里用的是vue框架。

  <div class="footer">
       <a  class="a-button" @click="scrollTo">start</a>
   </div>

js代码
注意：vue在同一个组件内，methods中的一个方法调用methods中的另外一个方法。
可以在调用的时候 this.$options.methods.方法名();

<script>
export default {
    name:'startLogo',
    data(){
        return {
            
        }
    },
    methods:{
        scrollTo:function(){
        //725是指定的位置高度
            this.$options.methods.startMove(725); //调用methods中的另外一个方法
        },
        startMove:function(top){
            let timer="";
            let speed=5;
            timer=setInterval(function(){
                let t=document.documentElement.scrollTop || document.body.scrollTop; //获取滚动条位置
                
                if(t<top){
                    if(document.documentElement.scrollTop>=0){
                        document.documentElement.scrollTop+=speed;//获取当前滚动条位置增加speed变量高度
                         console.log(document.documentElement.scrollTop);
                    }else{
                        document.body.scrollTop+=speed;
                    }
                    speed+=5;

                }else{
                    clearInterval(timer);  //清除定时器
                }
            },50);
        }
    }
}
</script>

在这里插入图片描述