使用JavaScript动态注入“返回顶部”按钮并实现平滑滚动

/**
 * 创建并返回一个包含指定HTML结构的“返回顶部”按钮元素。
 * 结构示例: <p><a href="javascript:void(0);" id="return-to-top"><i class="fa fa-chevron-up"></i></a></p>
 * @returns {HTMLElement} 返回创建的按钮元素。
 */
function createReturnToTopButton() {
    // 创建 <p> 元素
    const pElement = document.createElement('p');

    // 创建 <a> 元素
    const aElement = document.createElement('a');
    aElement.href = 'javascript:void(0);'; // 使用 void(0) 防止页面跳转
    aElement.id = 'return-to-top';

    // 创建 <i> 元素 (Font Awesome 图标)
    const iElement = document.createElement('i');
    iElement.className = 'fa fa-chevron-up'; // 假设已引入 Font Awesome

    // 将 <i> 元素添加到 <a> 元素中
    aElement.appendChild(iElement);

    // 将 <a> 元素添加到 <p> 元素中
    pElement.appendChild(aElement);

    return pElement;
}

/**
 * 将创建的“返回顶部”按钮注入到页面的DOM中。
 * @param {HTMLElement} buttonElement 要注入的按钮元素。
 */
function injectButtonIntoDOM(buttonElement) {
    // 确保DOM完全加载后再执行注入
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            document.body.appendChild(buttonElement);
        });
    } else {
        document.body.appendChild(buttonElement);
    }
}

/**
 * 为“返回顶部”按钮添加点击事件监听器，实现页面平滑滚动至顶部。
 * @param {string} buttonId 按钮的ID。
 */
function setupScrollToTopFunctionality(buttonId) {
    const btn = document.getElementById(buttonId);
    if (btn) {
        btn.addEventListener('click', function() {
            // 使用 window.scrollTo 实现平滑滚动
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 启用平滑滚动效果
            });
            // 或者使用 window.scroll(0, 0); 实现即时滚动
            // window.scroll(0, 0);
        });
    } else {
        console.warn(`元素ID为 '${buttonId}' 的按钮未找到，无法设置滚动功能。`);
    }
}

(function() {
    /**
     * 创建并返回一个包含指定HTML结构的“返回顶部”按钮元素。
     * 结构示例: <p><a href="javascript:void(0);" id="return-to-top"><i class="fa fa-chevron-up"></i></a></p>
     * @returns {HTMLElement} 返回创建的按钮元素。
     */
    function createReturnToTopButton() {
        const pElement = document.createElement('p');
        const aElement = document.createElement('a');
        aElement.href = 'javascript:void(0);';
        aElement.id = 'return-to-top';
        const iElement = document.createElement('i');
        iElement.className = 'fa fa-chevron-up'; // 确保已引入 Font Awesome 库

        aElement.appendChild(iElement);
        pElement.appendChild(aElement);
        return pElement;
    }

    /**
     * 将创建的“返回顶部”按钮注入到页面的DOM中。
     * @param {HTMLElement} buttonElement 要注入的按钮元素。
     */
    function injectButtonIntoDOM(buttonElement) {
        // 检查是否已经存在同ID的按钮，避免重复注入
        if (!document.getElementById('return-to-top')) {
            document.body.appendChild(buttonElement);
        } else {
            console.log('“返回顶部”按钮已存在，跳过注入。');
        }
    }

    /**
     * 为“返回顶部”按钮添加点击事件监听器，实现页面平滑滚动至顶部。
     * @param {string} buttonId 按钮的ID。
     */
    function setupScrollToTopFunctionality(buttonId) {
        const btn = document.getElementById(buttonId);
        if (btn) {
            btn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        } else {
            console.warn(`元素ID为 '${buttonId}' 的按钮未找到，无法设置滚动功能。`);
        }
    }

    // 页面加载完成后执行初始化
    function initializeReturnToTop() {
        const buttonElement = createReturnToTopButton();
        injectButtonIntoDOM(buttonElement);
        setupScrollToTopFunctionality('return-to-top');
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeReturnToTop);
    } else {
        initializeReturnToTop();
    }
})();

/* 示例 CSS 样式，您可以根据需要进行调整 */
#return-to-top {
    position: fixed; /* 固定定位，使其不随页面滚动 */
    bottom: 20px;    /* 距离页面底部 20px */
    right: 20px;     /* 距离页面右侧 20px */
    background-color: #007bff; /* 背景色 */
    color: white;    /* 字体颜色 */
    width: 40px;     /* 宽度 */
    height: 40px;    /* 高度 */
    border-radius: 50%; /* 圆形按钮 */
    display: flex;   /* 弹性布局，用于居中图标 */
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    font-size: 20px; /* 图标大小 */
    text-decoration: none; /* 移除下划线 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 阴影效果 */
    transition: opacity 0.3s ease-in-out; /* 渐变效果 */
    opacity: 0;      /* 默认隐藏 */
    pointer-events: none; /* 默认禁用鼠标事件 */
    z-index: 1000;   /* 确保在其他内容之上 */
}

#return-to-top.show {
    opacity: 1; /* 显示按钮 */
    pointer-events: auto; /* 启用鼠标事件 */
}

#return-to-top:hover {
    background-color: #0056b3; /* 鼠标悬停时的背景色 */
}

// 添加一个滚动事件监听器来控制按钮的显示/隐藏
window.addEventListener('scroll', function() {
    const btn = document.getElementById('return-to-top');
    if (btn) {
        if (window.pageYOffset > 200) { // 当页面向下滚动超过200px时显示按钮
            btn.classList.add('show');
        } else {
            btn.classList.remove('show');
        }
    }
});