返回顶部按钮：长页面的一键归位

功能简介

返回顶部按钮是一个悬浮在页面右下角的圆形按钮，当页面向下滚动超过一定距离后自动出现，点击即可平滑回到页面顶部。

如何开启

进入 WordPress 后台 → 「Vela主题设置」页面的「功能开关」分区 → 找到「返回顶部按钮」→ 勾选启用并保存。

效果与适用场景

• 滚动超过一屏后浮现，回顶采用平滑滚动。
• 不依赖任何第三方库，纯原生实现。
• 适合内容较多、页面较长的站点。

备注

按钮位置固定在视口右下角，关闭开关后不渲染。

实现代码

以下为「返回顶部按钮」的核心实现（取自 features.js 与 features.css）。

/* ---------- 返回顶部按钮（features.js 片段） ---------- */
if (C.backtotop) {
    var btn = doc.createElement('div');
    btn.className = 'vela-totop';
    btn.innerHTML = '↑';
    btn.title = '返回顶部';
    doc.body.appendChild(btn);
    btn.addEventListener('click', function () {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
    window.addEventListener('scroll', function () {
        var y = window.scrollY || doc.documentElement.scrollTop;
        btn.classList.toggle('show', y > 300);
    }, { passive: true });
}

/* 返回顶部按钮（features.css 片段） */
.vela-totop {
    position: fixed;
    right: 24px;
    bottom: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #2f6fed;
    color: #fff;
    font-size: 22px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    z-index: 9998;
    user-select: none;
}
.vela-totop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

按钮默认 opacity:0; visibility:hidden，滚动超过 300px 时追加 .show 类淡入显示。