如何实现scrollToTop按钮在页面滚动20px后才显示

1. 修改CSS样式 #

首先修正原有CSS中重复定义width的错误，同时添加按钮默认隐藏的规则：

.btnScrollToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px; /* 替换原有重复的width属性 */
    border: none;
    z-index: 99;
    cursor: pointer;
    display: none; /* 默认隐藏按钮 */
}
/* 按钮显示状态类 */
.btnScrollToTop.show {
    display: block;
}

2. 修改JS逻辑 #

在原有点击返回逻辑基础上，添加滚动监听，判断滚动距离控制按钮显隐：

// JavaScript Document    
const btnScrollToTop = document.querySelector(".btnScrollToTop");

// 原有点击返回顶部逻辑
btnScrollToTop.addEventListener("click", function() {
    window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth"
    });
});

// 控制按钮显隐的逻辑函数
function toggleScrollBtn() {
    // 滚动距离超过20px时显示按钮，否则隐藏
    if (window.scrollY > 20) {
        btnScrollToTop.classList.add("show");
    } else {
        btnScrollToTop.classList.remove("show");
    }
}

// 页面加载完成时先判断一次按钮状态，避免刷新后停在页面下方时按钮不显示
document.addEventListener("DOMContentLoaded", toggleScrollBtn);
// 监听页面滚动事件
window.addEventListener("scroll", toggleScrollBtn);

可选优化：添加淡入淡出效果 #

如果需要更顺滑的显隐过渡，可修改CSS规则替换display控制方式：

.btnScrollToTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border: none;
    z-index: 99;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 隐藏状态下不响应点击事件 */
    transition: all 0.3s ease; /* 过渡动画时长可自行调整 */
}
.btnScrollToTop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

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