如何实现网页初始从顶部加载，向上滚动时禁止超过指定临界位置

方案1：自动检测滚动位置触发限制 #

该方案适合允许用户手动滚动过闪屏区域后自动锁定的场景

调整后的代码 #

原有代码的问题是加载完成后执行了强制跳转逻辑，删掉该行后新增滚动状态标记即可：

HTML

<!-- 闪屏和头部区域 -->
<div class="splash-header">
  <nav role="navigation" class="open">
    <a href="#services" class="banner-btn">
      <img src="https://pluspng.com/img-png/down-arrow-png-down-icon-1600.png" alt="向下滚动箭头" height="100" width="100">
    </a>
  </nav>
</div>
<!-- 主内容区块，即向上滚动的上限位置 -->
<div id="services">
  主页面内容
</div>

CSS

/* 按需设置闪屏和头部的高度，这里假设总高度为100vh */
.splash-header {
  height: 100vh;
}
#services {
  min-height: 3500px;
}

JS

$(document).ready(function(){
    // 主内容区块顶部位置，即向上滚动的上限
    var limitTop = $("#services").offset().top;
    // 状态标记：是否已经滚动过主内容区块
    var hasScrolledPast = false;

    // 滚动监听
    $(document).on("scroll", function(e){
        var scrollTop = $(window).scrollTop();
        // 滚动位置超过主内容顶部时，标记状态为已滚动过
        if(scrollTop >= limitTop) {
            hasScrolledPast = true;
        }
        // 只有已滚动过的情况下，才限制向上滚动
        if(hasScrolledPast && scrollTop < limitTop){
            $(document).scrollTop(limitTop);
        }
    });
});

如果需要同时限制向下滚动的最大位置，在上述逻辑中添加对应判断即可。

方案2：点击箭头按钮后才锁定滚动范围 #

该方案匹配你提到的按钮触发需求，用户只有点击跳转按钮后才会禁止向上滚动，手动滚动不受影响：

代码实现 #

JS部分调整为：

$(document).ready(function(){
    var limitTop = $("#services").offset().top;
    var scrollLocked = false;

    // 按钮点击事件
    $(".banner-btn").on("click", function(e){
        e.preventDefault();
        // 平滑滚动到主内容区块
        $("html, body").animate({
            scrollTop: limitTop
        }, 500, function(){
            // 滚动完成后开启滚动锁定
            scrollLocked = true;
        });
    });

    // 滚动监听
    $(document).on("scroll", function(e){
        var scrollTop = $(window).scrollTop();
        // 只有锁定状态开启时，限制向上滚动
        if(scrollLocked && scrollTop < limitTop){
            $(document).scrollTop(limitTop);
        }
    });
});

如果你后续确定要禁止用户手动滚动，只允许点击按钮跳转，可以在页面初始时给body加overflow-y: hidden属性，点击按钮后再改回overflow-y: auto同时开启锁定即可。

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