移动端返回顶部按钮不显示求助，需实现滚动32px触发及防遮挡

问题诊断 #

你的代码存在几个核心问题导致移动端按钮失效：

1. CSS语法错误：.gotopbtn选择器被嵌套了两层，纯原生CSS不支持这种写法，直接导致按钮样式完全不生效
2. 无效媒体查询：你针对#scroll（ID选择器）设置隐藏，但HTML中对应的是class="scroll"，且该规则与返回顶部按钮无关

修复后完整代码 #

HTML（无需修改）

<!---Scroll to the top button-->
<section class="scroll"></section>
<a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i> </a>
<!--End of scroll to top button-->

CSS（实现所有需求）

/* 基础样式：默认隐藏按钮 */
.gotopbtn{
    position: fixed;
    width: 50px;
    height: 50px;
    background: var(--lightersg);
    bottom: 16px;
    right: 16px;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 22px;
    border-radius: 50%;
    /* 默认隐藏，添加过渡动画 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999; /* 确保按钮在最上层 */
}

/* 滚动超过32px时显示按钮（CSS原生方案） */
body:has(:root:scrolled) .gotopbtn {
    opacity: 1;
    visibility: visible;
}

/* 移动端适配：优化按钮尺寸与位置 */
@media only screen and (max-width: 600px) {
    .gotopbtn{
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 18px;
        right: 12px;
        bottom: 12px;
    }
}

/* 避免被footer遮挡：替换为你实际的footer类名和高度 */
.gotopbtn{
    /* 假设footer高度为80px，调整数值匹配你的页面 */
    bottom: calc(80px + 16px);
}
@media only screen and (max-width: 600px) {
    .gotopbtn{
        /* 移动端footer高度通常更小，按需调整 */
        bottom: calc(60px + 12px);
    }
}

兼容与补充说明 #

1. 滚动触发的兼容方案：若目标浏览器不支持:has伪类，添加以下JS兜底：

window.addEventListener('scroll', () => {
    document.body.classList.toggle('scroll-active', window.scrollY > 32);
});

同时在CSS中添加：

body.scroll-active .gotopbtn {
    opacity: 1;
    visibility: visible;
}

2. 动态footer适配：如果footer高度不固定，用JS获取实际高度后设置按钮位置：

const footer = document.querySelector('.footer');
const gotopBtn = document.querySelector('.gotopbtn');
gotopBtn.style.bottom = `${footer.offsetHeight + 16}px`;

3. 图标显示检查：确保已引入Font Awesome的CSS文件，否则箭头图标无法正常渲染。

内容的提问来源于stack exchange，提问作者user21054461