JS滚动显示返回顶部图标遇Lightbox及分辨率适配问题求助

问题1：集成Lightbox时返回顶部图标始终隐藏 #

原因分析 #

当前判断逻辑依赖isInViewport函数检测#gototopmark是否完全在视口内，但Lightbox用margin-left: -5200px的隐藏方式会干扰视口尺寸计算（比如document.documentElement.clientWidth被异常撑开），导致isInViewport判断结果始终为true，图标一直处于隐藏状态。同时原脚本仅在页面加载时执行一次，未监听滚动事件，滚动过程中不会更新图标显示状态。

修复方案 #

放弃基于元素视口位置的判断逻辑，改为监听页面滚动距离，只要滚动超过自定义阈值（比如100px）就显示图标，否则隐藏。这种方式完全不受Lightbox等其他元素影响。

问题2：低分辨率下少量内容轻微滚动时图标不显示 #

原因分析 #

原逻辑要求#gototopmark完全离开视口才显示图标，但低分辨率下少量内容滚动时，该元素仍部分或完全处于视口内，isInViewport返回true，图标保持隐藏。

修复方案 #

同样采用基于滚动距离的判断逻辑，只要页面滚动了一定距离（哪怕是轻微滚动），就显示图标，无需等待元素离开视口。

完整修复代码 #

替换原JS脚本 #

删除原来的isInViewport函数和页面加载时的判断脚本，替换为以下代码：

<script>
// 获取返回顶部图标容器
const goToTopMark = document.querySelector('#gototopmark');

// 初始化隐藏图标
goToTopMark.style.display = 'none';

// 定义滚动监听函数
function handleScroll() {
    // 滚动距离超过100px时显示图标，否则隐藏（可自定义阈值）
    if (window.scrollY > 100) {
        goToTopMark.style.display = 'block';
    } else {
        goToTopMark.style.display = 'none';
    }
}

// 页面加载时执行一次（处理刷新时已滚动的情况）
window.addEventListener('load', handleScroll);

// 监听滚动事件
window.addEventListener('scroll', handleScroll);
</script>

优化Lightbox隐藏方式（可选但推荐） #

原Lightbox用负margin隐藏的方式易干扰页面尺寸计算，建议改用更安全的方式：

/** Default lightbox to hidden */
.lightbox {
    visibility: hidden;
    opacity: 0;
    /** Position and style */
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.78);
    transition: all .6s;
}

.lightbox:target {
    /** Remove default browser outline */
    outline: none;
    /** Unhide lightbox **/
    visibility: visible;
    opacity: 1;
    transition: all .8s;
}

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