Docsify返回顶部插件开发-docsify-backTop

一个docsify文档的返回顶部插件，同时适用于其他需要添加回到顶部组件的所有页面。

项目地址：docsify-backTop

Demo地址：docsify backTop Demo

开发原因

docsify文档插件众多中，没有实现返回顶部功能的插件。为此，开发一个回到顶部插件，docsify-backTop。

该插件同样适用于docsify文档外，其他页面同样适用。

功能需求

• JS单文件。功能全部由单个JS文件实现，不在HTML文档内嵌入结构及样式代码。
• 回到顶部。点击组件实现回到顶部功能，带缓动动画效果。
• 组件显示隐藏。页面未滚动，回到顶部组件不显示；滚动页面显示回到顶部组件。
• 缓动动画。回到顶部、组件显示与隐藏带有缓动动画效果。
• 组件半透明。滚动页面显示组件5s后半透明，鼠标经过组件不透明，鼠标离开组件5s后半透明。（暂未实现，效果未达预计效果）
• 自定义。自定义调整组件大小位置、自定义图标、组件背景颜色。

JS源代码

初步实现功能

// DOM内容加载完成后执行
window.addEventListener('DOMContentLoaded', function () {
    // 1. 创建元素
    // 1.1 获取body元素
    var body = document.body;
    // 1.2 创建回到顶部组件div
    var div = document.createElement('div');
    div.className = 'backTop';
    div.innerHTML = '<svg t="1662288563130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3633" width="200" height="200"><path d="M513 103.7c-226.1 0-409.4 183.3-409.4 409.4S286.9 922.6 513 922.6s409.4-183.3 409.4-409.4S739.1 103.7 513 103.7z m153.5 364.7c-5.2 5.3-12.1 7.9-19 7.9s-13.8-2.6-19-7.9L545.1 385c0 0.4 0.1 0.7 0.1 1.1V705c0 11.1-5.7 20.9-14.4 26.6-4.7 4.2-10.9 6.7-17.7 6.7-6.8 0-13-2.5-17.7-6.7-8.7-5.7-14.4-15.5-14.4-26.6V386.1c0-0.4 0-0.7 0.1-1.1l-83.4 83.4c-10.5 10.5-27.5 10.5-38 0s-10.5-27.5 0-38L494 295.9c10.5-10.5 27.5-10.5 38 0l134.5 134.5c10.5 10.4 10.5 27.5 0 38z" fill="#2096ff" p-id="3634"></path></svg>';
    body.appendChild(div);
    // 1.3 回到顶部CSS
    div.style.opacity = 0;
    div.style.position = 'fixed';
    div.style.bottom = '15px';
    div.style.right = '15px';
    div.style.width = '32px';
    div.style.height = div.style.width;
    div.style.textAlign = 'center';
    div.style.lineHeight = div.style.width;
    div.style.borderRadius = div.offsetWidth / 2 + 'px';
    div.style.cursor = 'pointer';
    div.style.transition = 'opacity 0.5s';

    // 1.4 svg CSS 如果存在则设置宽高
    if (div.children.length) {
        div.children[0].style.width = '100%';
        div.children[0].style.height = '100%';
    }

    // 2.点击回到顶部
    div.addEventListener('click', function () {
        backToTopAnimate(window, 0);
    });
    // 2.1 回到顶部缓动函数封装
    function backToTopAnimate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.scrollY) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.scrollY == target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            window.scroll(0, obj.scrollY + step);
        }, 15);
    }

    // 3.显示与隐藏
    window.addEventListener('scroll', function () {
        div.style.opacity = window.scrollY > 0 ? 1 : 0;
    });

});

函数封装

函数封装目的：

• 嵌入任何页面内，防止变量命名冲突。
• 设置自定义参数。自定义参数，组件大小、组件位置（偏移底部/右侧距离）、组件背景颜色、Logo（符号、颜文字、svg矢量图等）。

通过对象的方式设置参数：

var docsifyBackTop = {
    size: 32,           // 数值，组件大小，必填。
    bottom: 15,         // 数值，组件底部偏移距离，必填。
    right: 15,          // 数值，组件右侧偏移距离，必填。
    logo: '🔝',          // 字符串或svg矢量图代码，必填。
    bgColor: '#2096ff',    // 背景颜色，#fff、pink等，选填。
};

封装完成后JS完整代码

// DOM内容加载完成后执行
window.addEventListener('DOMContentLoaded', function () {

    // 4. 封装函数docsifyBackTopFn()
    // 4.1 调用函数
    docsifyBackTopFn(docsifyBackTop);
    // 4.2 封装函数
    function docsifyBackTopFn(obj) {

        // 1. 创建元素
        // 1.1 获取body元素
        var body = document.body;
        // 1.2 创建回到顶部组件div
        var div = document.createElement('div');
        div.className = 'backTop';
        div.innerHTML = obj.logo;
        body.appendChild(div);
        // 1.3 回到顶部CSS
        div.style.opacity = 0;
        div.style.position = 'fixed';
        div.style.bottom = obj.bottom + 'px';
        div.style.right = obj.right + 'px';
        div.style.width = obj.size + 'px';
        div.style.height = div.style.width;
        div.style.textAlign = 'center';
        div.style.lineHeight = div.style.width;
        div.style.backgroundColor = obj.bgColor;
        div.style.borderRadius = '50%';
        div.style.cursor = 'pointer';
        div.style.transition = 'opacity 0.5s';

        // 1.4 svg CSS 如果存在则设置宽高
        if (div.children.length) {
            div.children[0].style.width = '100%';
            div.children[0].style.height = '100%';
        }

        // 2.点击回到顶部
        div.addEventListener('click', function () {
            backToTopAnimate(window, 0);
        });
        // 2.1 回到顶部缓动函数封装
        function backToTopAnimate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - obj.scrollY) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.scrollY == target) {
                    clearInterval(obj.timer);
                    callback && callback();
                }
                window.scroll(0, obj.scrollY + step);
            }, 15);
        }

        // 3.显示与隐藏
        window.addEventListener('scroll', function () {
            div.style.opacity = window.scrollY > 0 ? 1 : 0;
        });

    }
});

JS压缩

对开发完成的JS插件，docsify-backTop.js进行代码压缩并命名docsify-backTop.min.js。

上传Github

1. 将docsify-backTop.min.js、docsify-backTop.js上传至github，编写readme.md。
2. 利用jsDelivr CDN加速获取地址。

插件使用

1. 页面引入JS文件
2. 引入参数设置

兼容性问题

未考虑兼容性，可能会遇到如下问题：

• 低版本浏览器组件无显示/隐藏的过渡效果。过渡效果通过CSS3中的transition属性设置，过低版本可能无法展示过渡过程。