小墨の博客

梦想需要付诸行动,否则只能是梦

原生js实现平滑返回顶部效果 可自定义速度和距离显示

本文转自:https://yaw.ee/2019.html

现在有这样一个需求:返回顶部的按钮悬浮在右下角,默认是隐藏的,当页面下拉到一定高度后才会显示,然后点击按钮平滑缓慢的返回顶部。

好,我们先来写结构,在这里懒的写css,就用个人写的一个小框架Yawrap来代替,感兴趣的童鞋欢迎前来拍砖。
<img id="backup" class="no fix" r="50" b="50" w="50" yawsrc="../img/backup.png" alt="返回顶部">

原生js实现平滑返回顶部效果 可自定义速度和高度显示

然后我们来写功能,请看大屏幕~

//定义返回顶部的方法,并传入速度和距离两个参数
function yawTotop(speed,distance) {
    let yawtotop = document.querySelector('.yaw-totop');    //来一个滚动监听事件
    window.onscroll = function() {        //定义一个空的时间
        let time = null;        //如果滚动高度大于我们设置的高度时就显示
        if (document.body.scrollTop || document.documentElement.scrollTop &gt; distance) {
            yawtotop.style.display = 'block';
        } else {
            yawtotop.style.display = 'none';
        }
        yawtotop.style.cursor = 'pointer';        //点击按钮返回顶部
        yawtotop.onclick = function() {
            cancelAnimationFrame(time);
            time = requestAnimationFrame(function fn(){
            let oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(oTop &gt; 0){
                    document.body.scrollTop = document.documentElement.scrollTop = oTop - speed;
                    time = requestAnimationFrame(fn);
                }else{
                    cancelAnimationFrame(time);
                }
            })
        }
    }
}//速度为60,这个值越大滑动速度越快;距离值为300,距离顶部300px时才会显示;yawTotop(60,300);

关于里面的requestAnimationFrame,这是一个浏览器用于定时循环操作的一个接口,相比用setTimeout它的优点是节省系统资源,提高系统性能,改善视觉效果,这里不详细阐述它的使用。

张小弟之家

本文链接:
文章标题:

本站文章除注明转载/出处外,均为原创,若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站,谢谢合作。本站邮箱:admin@only4.work

尊重他人劳动成果,共创和谐网络环境。点击版权声明查看本站相关条款。

    发表评论:

    搜索
    本文二维码
    标签列表
    站点信息
    • 文章总数:511
    • 页面总数:20
    • 分类总数:92
    • 标签总数:208
    • 评论总数:62
    • 浏览总数:231783

    | | |
    | |  Z-Blog PHP