如何仅用JavaScript实现Div平滑滚动到底部（无需jQuery）

要把div直接跳转到底部的交互改成平滑滚动，有几种简单且实用的方案，根据你的需求选择即可：

方法1：原生API实现（最简单） #

现代浏览器都支持scrollTo或scrollIntoView的平滑行为选项，直接替换你原来的代码就能生效：

用scrollTo方法 #

直接给容器调用scrollTo，指定behavior: 'smooth'参数：

container.scrollTo({
  top: container.scrollHeight,
  behavior: 'smooth'
});

用scrollIntoView方法 #

如果容器里有明确的底部元素（比如最后一条消息、最后一个列表项），可以直接让这个元素滚动到视图底部，效果更精准：

// 获取容器内最后一个子元素
const lastItem = container.lastElementChild;
lastItem.scrollIntoView({
  behavior: 'smooth',
  block: 'end' // 确保元素底部与容器底部对齐
});

方法2：手动实现自定义动画（兼容旧浏览器/自定义曲线） #

如果需要兼容IE这类不支持原生平滑滚动的浏览器，或者想要自定义动画速度、缓动曲线，可以用requestAnimationFrame手动编写动画逻辑：

function smoothScrollToBottom(container) {
  const targetScrollTop = container.scrollHeight;
  const currentScrollTop = container.scrollTop;
  const distance = targetScrollTop - currentScrollTop;
  const duration = 500; // 滚动总时长，单位毫秒
  let startTime = null;

  function animateScroll(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsedTime = timestamp - startTime;
    // 计算滚动进度，这里用ease-out缓动曲线，可自行替换
    const progress = Math.min(elapsedTime / duration, 1);
    const easedProgress = progress * (2 - progress);
    
    container.scrollTop = currentScrollTop + distance * easedProgress;
    
    if (progress < 1) {
      requestAnimationFrame(animateScroll);
    }
  }

  requestAnimationFrame(animateScroll);
}

// 调用方法触发平滑滚动
smoothScrollToBottom(container);

注意事项 #

• 原生API的behavior: 'smooth'在Chrome、Firefox、Edge等现代浏览器均支持，无需额外依赖；
• 手动动画可灵活调整滚动速度和缓动效果，比如把easedProgress的计算逻辑换成线性、ease-in等其他曲线；
• 确保容器的overflow属性设置为auto或scroll，否则滚动行为不会生效。

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