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属性设置,过低版本可能无法展示过渡过程。

评论
 本篇
Docsify返回顶部插件开发-docsify-backTop Docsify返回顶部插件开发-docsify-backTop
一个docsify文档的返回顶部插件,同时适用于其他需要添加回到顶部组件的所有页面。 项目地址:docsify-backTop Demo地址:docsify backTop Demo 开发原因docsify文档插件众多中,没有实现返回顶部功
2022-09-05
下一篇 
Docsify文档搭建记录 Docsify文档搭建记录
使用docsify部署自己的学习笔记库 Docsify Demo地址:https://xmq.plus/docs docsify中文手册:https://docsify.js.org/#/zh-cn/ 安装安装docsify: npm i
2022-06-17
  目录