使用JavaScript动态创建并实现返回顶部功能

<p><a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a></p>

// 确保DOM完全加载后再执行
document.addEventListener('DOMContentLoaded', function() {
    // 创建 <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);

    // 将 <p> 元素添加到页面的 body 中
    // 您也可以选择将其添加到页面中的特定容器，例如 document.querySelector('#some-container').appendChild(pElement);
    document.body.appendChild(pElement);

    // ... 接下来是按钮的滚动功能实现
});

// 获取之前动态创建的按钮元素
let btn = document.getElementById('return-to-top');

// 为按钮添加点击事件监听器
btn.addEventListener('click', function() {
    // 将页面滚动到顶部 (坐标 0, 0)
    window.scroll(0, 0);
    // 或者使用更现代的 scrollTo 方法，支持平滑滚动
    // window.scrollTo({
    //     top: 0,
    //     behavior: 'smooth'
    // });
});

document.addEventListener('DOMContentLoaded', function() {
    // 1. 动态创建并注入返回顶部按钮
    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';

    aElement.appendChild(iElement);
    pElement.appendChild(aElement);
    document.body.appendChild(pElement);

    // 2. 实现返回顶部滚动功能
    let btn = document.getElementById('return-to-top');
    btn.addEventListener('click', function() {
        window.scroll(0, 0);
        // 或者使用平滑滚动
        // window.scrollTo({
        //     top: 0,
        //     behavior: 'smooth'
        // });
    });
});

#return-to-top {
    position: fixed; /* 固定定位 */
    bottom: 20px;    /* 距离底部 20px */
    right: 20px;     /* 距离右侧 20px */
    background-color: #333; /* 背景色 */
    color: #fff;     /* 文字颜色 */
    width: 40px;     /* 宽度 */
    height: 40px;    /* 高度 */
    text-align: center; /* 文字居中 */
    line-height: 40px; /* 行高与高度一致，使图标垂直居中 */
    border-radius: 50%; /* 圆形按钮 */
    font-size: 20px; /* 图标大小 */
    cursor: pointer; /* 鼠标悬停显示手型 */
    display: none;   /* 默认隐藏，通过JS控制显示 */
    z-index: 1000;   /* 确保按钮在其他内容之上 */
    transition: opacity 0.3s ease-in-out; /* 渐变效果 */
}

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

/* 如果使用了Font Awesome，确保其CSS已引入 */
.fa {
    font-family: 'Font Awesome 5 Free'; /* 或其他版本 */
    font-weight: 900; /* Font Awesome 5 的实心图标通常需要 */
}

// ... 在 document.addEventListener('DOMContentLoaded', function() { ... 内部
    // 获取按钮元素
    let btn = document.getElementById('return-to-top');

    // 监听页面滚动事件
    window.addEventListener('scroll', function() {
        if (window.scrollY > 200) { // 当页面滚动超过200px时显示按钮
            btn.style.display = 'block';
            // 如果需要渐变效果，可以控制 opacity
            // btn.style.opacity = '1';
        } else { // 否则隐藏按钮
            btn.style.display = 'none';
            // btn.style.opacity = '0';
        }
    });

    // ... 其他按钮点击事件代码
// ... }