JS实现页面返回顶部的匀加速运动

我会带着你远行 2022-07-13 01:07 220阅读 0赞

JS实现页面返回顶部的匀加速运动

//返回顶部
    
        //声明返回顶部的函数
        function returnTop(){
            var timer;
            clearInterval(timer);
            timer = setInterval(function(){
                var now = $(document).scrollTop();
                console.log(now);
                var speed = (0-now)/10;
                console.log(speed);
                speed = speed >0 ? Math.ceil(speed):Math.floor(speed);
                if(scrollTop == 0){
                    clearInterval(timer);
                }
                document.documentElement.scrollTop=scrollTop+speed*1.8;// 1.8这里可以自定义返回的速度
                document.body.scrollTop=scrollTop+speed*1.8;
            }, 30);
        }
    
        //控制返回顶部按钮显隐
        function showTopIcon(wh , topHeight) {
            if(topHeight > wh){
                $("div#to_top").removeClass("hidden");
            }
            if(topHeight == 0){
                $("div#to_top").addClass("hidden");
            }
        }
    
        //初始化到页面顶部
        var wh = $(window).height();
    
        //检测滚动，并声明距离顶部的距离，公共变量方便通信
        var scrollTop;
        $(window).scroll(function () {
            scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            showTopIcon(wh , scrollTop);
        });
    
        //点击按钮返回到顶部
        $("div#to_top").click(function (e) {
            returnTop();
            $("div#to_top").addClass("hidden");
        });

发表评论取消回复

表情：

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

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

相关阅读

相关 js或jQuery实现返回顶部功能------Sestid

1、纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); ...

迈不过友情╰/ 2024年04月18日 10:32/ 0 赞/ 72 阅读

相关 Web css+js实现返回顶部例子

Web css+js实现返回顶部例子一、简述记-

深碍√TFBOYSˉ_/ 2023年06月25日 03:29/ 0 赞/ 10 阅读

相关 js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮例如这些网站： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

我会带着你远行/ 2023年03月03日 13:25/ 0 赞/ 19 阅读

相关 js制作返回顶部

页面返回顶部有很多漂亮的形式，今天这里分享一个返回顶部的两个小动画。效果一： ![在这里插入图片描述][20200622190305716.gif] 效果而： !

深碍√TFBOYSˉ_/ 2023年02月20日 03:04/ 0 赞/ 24 阅读

相关 JavaScript - PC端页面纯 JS 实现返回顶部（带过渡动画）

效果图 ![在这里插入图片描述][20210316161947484.gif] 实现给 `DOM` 元素（返回顶部按钮），绑定点击事件，调用以下函数即可。

布满荆棘的人生/ 2022年11月10日 05:28/ 0 赞/ 259 阅读

相关 js返回顶部的封装

/ Created by raid on 2016/9/25. / function BackTop(el, opts) {

妖狐艹你老母/ 2022年07月16日 01:18/ 0 赞/ 253 阅读

相关 JS实现页面返回顶部的匀加速运动

JS实现页面返回顶部的匀加速运动 //返回顶部 //声明返回顶部的函数 function returnTop(){

我会带着你远行/ 2022年07月13日 01:07/ 0 赞/ 221 阅读

相关 Web JS实现页面返回顶部

![右下角“返回顶部“按钮][1240] > > 之前写博客的时候加了个返回顶部的功能 > > 采用js的scrollTop属性实现了一下这个简单的功能当页面特别长的时

超、凢脫俗/ 2022年06月17日 00:54/ 0 赞/ 364 阅读

相关 jQuery下的返回顶部功能的实现实例页面

CSS代码： .backToTop { display: none; width: 18px;

男娘i/ 2022年03月20日 04:55/ 0 赞/ 224 阅读

相关原生JS返回顶部，带返回效果

有些网站当滑到一定高度时右下角会有一个按钮，你只要一点就可以直接返回顶部了。那这个功能是怎么做到的呢。其实不算太难；首先我们先在网页中创建一个按钮，上面写上返回顶部，把它的

秒速五厘米/ 2021年10月01日 02:02/ 0 赞/ 391 阅读