侧边滚动页面返回起始位置按钮无法重新显示问题求助

你的问题核心是误用了纵向滚动的属性来处理横向滚动场景——普通返回顶部按钮依赖scrollTop（纵向滚动距离），但你的页面是侧边（横向）滚动，需要针对scrollLeft（横向滚动距离）做逻辑调整：

修改后的完整代码 #

HTML & JavaScript #

<button onclick="returnToStartFunction()" id="toStart" title="返回起始位置">&#8656;</button>

<script>
    let startButton = document.getElementById("toStart");

    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        // 替换scrollTop为scrollLeft，判断横向滚动距离
        if (document.body.scrollLeft > 30 || document.documentElement.scrollLeft > 30) {
            startButton.style.display = "block";
        } else {
            startButton.style.display = "none";
        }
    }

    function returnToStartFunction() {
        // 替换scrollTop为scrollLeft，回到横向起始位置
        document.body.scrollLeft = 0;
        document.documentElement.scrollLeft = 0;
    }
</script>

CSS（保持原样式即可） #

/*
返回起始箭头样式
*/

#toStart {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0.5rem;
    font-size: 65px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    z-index: 999;
}

#toStart:hover {
    background-color: rgba(30,101,49);
}

/*
返回起始箭头样式结束
*/

关键修改说明 #

1. 滚动触发逻辑：把判断条件里的scrollTop换成scrollLeft，这样页面横向滚动超过30px时，按钮才会自动显示。
2. 返回定位逻辑：将回到顶部的scrollTop=0改成scrollLeft=0，确保点击按钮后页面回到横向滚动的起始位置。

如果你的横向滚动是通过自定义容器（而非body/html）实现的，只需把document.body和document.documentElement替换为对应容器元素即可，示例：

// 假设横向滚动容器id为scrollContainer
const scrollContainer = document.getElementById('scrollContainer');

function scrollFunction() {
    if (scrollContainer.scrollLeft > 30) {
        startButton.style.display = "block";
    } else {
        startButton.style.display = "none";
    }
}

function returnToStartFunction() {
    scrollContainer.scrollLeft = 0;
}

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