修改jQuery滚动代码：禁止滚动超出#main_box区域

点击.main-btn元素向上滚动时，会出现滚动越过#main_box容器的问题，主项目中甚至会完全超出目标区域。以下是修改后的jQuery代码，确保滚动位置严格限制在#main_box范围内，不会超出哪怕1像素：

修改后的jQuery代码 #

$(document).ready(function(){
  var isScrolling = false;

  $("#main_box .main-btn").click(function(){
    if (isScrolling) return;
    isScrolling = true;

    var $window = $(window);
    var $mainBox = $("#main_box");
    var targetId = $(this).attr("id");
    var $target = $("#" + targetId);
    
    // 目标元素的顶部偏移位置
    var targetTop = $target.offset().top;
    // main_box的顶部偏移位置
    var mainBoxTop = $mainBox.offset().top;
    // main_box的完整底部位置（包含外边距）
    var mainBoxBottom = mainBoxTop + $mainBox.outerHeight(true);
    // 当前窗口高度
    var windowHeight = $window.height();
    
    // 允许的最小滚动位置：不能滚到main_box上方
    var minScrollTop = mainBoxTop;
    // 允许的最大滚动位置：窗口底部对齐main_box底部，避免超出
    var maxScrollTop = mainBoxBottom - windowHeight;
    
    // 处理main_box高度小于窗口高度的情况，确保最大值不小于最小值
    maxScrollTop = Math.max(maxScrollTop, minScrollTop);
    
    // 最终滚动位置：限制在允许的范围内
    var finalScrollTop = Math.max(minScrollTop, Math.min(targetTop, maxScrollTop));

    $("html, body").animate({
      scrollTop: finalScrollTop
    }, 1000, function(){
      isScrolling = false;
    });
  });
});

关键修改说明 #

• 修正滚动位置逻辑：原代码错误地使用滚动距离作为scrollTop值，现在直接计算目标元素的绝对位置，并将其限制在合法范围内。
• 准确计算容器边界：使用outerHeight(true)获取#main_box的完整高度（包含外边距），确保底部位置计算无误差。
• 双向边界限制：设置最小滚动位置防止滚到容器上方，设置最大滚动位置防止容器底部超出视口。
• 兼容特殊场景：当#main_box高度小于窗口高度时，强制滚动位置保持在容器顶部，确保容器完整显示。

对应的HTML和CSS代码可保持原内容不变。

内容的提问来源于stack exchange，提问作者Wp-PHP