来实现一个js平滑滚动到顶部的小功能

简介: 来实现一个js平滑滚动到顶部的小功能

需要添加类名 top


    // 平滑滚动到顶部
    var scrollTopSmooth = function (position) {
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function (cb) {
                return setTimeout(cb, 10);
            };
        }
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var step = function () {
            var distance = position - scrollTop;
            scrollTop = scrollTop + distance / 5;
            if (Math.abs(distance) < 1) {
                window.scrollTo(0, position);
            } else {
                window.scrollTo(0, scrollTop);
                requestAnimationFrame(step);
            }
        };
        step();
    }
    $backToTop = document.querySelector('.top')
    $backToTop.addEventListener('click', function () {
        scrollTopSmooth(0);
    }, false);
相关文章
|
14天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
14天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
2月前
|
JavaScript 前端开发
js制作九宫格抽奖功能
js制作九宫格抽奖功能
21 0
|
3月前
|
JavaScript 前端开发
|
7天前
|
JavaScript 安全 前端开发
|
13天前
|
JavaScript 前端开发
如何用JS实现选项卡功能
如何用JS实现选项卡功能
13 0
|
14天前
|
存储 前端开发 JavaScript
使用JavaScript实现复杂功能——一个交互式音乐播放器
使用JavaScript实现复杂功能——一个交互式音乐播放器
|
14天前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
21天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型,JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。
|
1月前
|
JavaScript 前端开发
购物车的功能——JS源码
购物车的功能——JS源码
15 2