当html与body设为100%高度时平滑滚动失效的技术问询

嘿，这个问题我之前也踩过坑！核心原因其实很直白：你把页面的滚动容器从默认的html/body换成了#wrap，但平滑滚动脚本还在操作原来的容器。

为什么平滑滚动会失效？ #

当你给html, body设置height: 100%，又给#wrap加上overflow-y: scroll后，页面的滚动行为已经完全由#wrap接管了——html和body本身不会再产生滚动条。而你的原脚本是对$('html, body')调用animate({scrollTop: ...})，这相当于在一个不会滚动的元素上执行滚动操作，自然看不到任何效果。

修正后的解决方案 #

只需要把脚本里的滚动操作对象换成#wrap，同时调整目标位置的计算逻辑（现在要基于#wrap的坐标系来计算偏移）：

/* 你的原有CSS可以保留 */
html, body { height: 100%; }
#wrap { height: 100%; overflow-y: scroll; }

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    // 验证同域名同路径，避免跨页面跳转
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      // 兼容用name属性定义的锚点
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      
      if (target.length) {
        // 切换滚动容器为#wrap
        $('#wrap').animate({
          // 计算目标元素相对于#wrap的滚动位置
          scrollTop: target.offset().top - $('#wrap').offset().top + $('#wrap').scrollTop()
        }, 600); // 这里的600是滚动时长，可根据需求调整快慢
        
        // 阻止默认的锚点跳转行为，避免页面跳动
        return false;
      }
    }
  });
});

关键细节说明 #

target.offset().top - $('#wrap').offset().top 是计算目标元素相对于#wrap顶部的距离，再加上#wrap当前的scrollTop值，就能得到滚动到目标位置需要设置的准确scrollTop，这样平滑滚动就能精准定位了。如果你的#wrap有padding-top之类的内边距，记得在计算时把这个值也减去，保证定位更准确。

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