Nextjs中overflow-y-auto容器回到顶部功能失效解决问询

• 问题原因：

  1. 最初使用的window.scrollTo()是控制浏览器窗口的滚动，而你的滚动区域是设置了overflow-y-auto的div容器，两者不属于同一个滚动上下文，所以该方法对容器无效。
  2. 按钮的onClick绑定存在两处错误：函数名拼写错误（scrolltoTop应为scrollToTop），且仅引用了函数未执行调用。

• 正确实现方案：
  通过useRef获取滚动容器的DOM引用，直接操作容器的滚动方法，同时修正按钮的点击事件绑定：

import { useRef } from 'react';

// 组件内部代码
const scrollable = useRef<HTMLDivElement>(null);

const scrollToTop = () => {
  // 先判断ref是否已挂载到DOM元素
  if (scrollable.current) {
    scrollable.current.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  }
};

return (
  <div 
    className="sticky z-30 top-0 h-screen overflow-y-auto inset-0 w-full bg-slate-100"
    ref={scrollable}
  >
    <article className="prose px-5 py-2 my-4 bg-white rounded-md min-h-screen">
      <MDXProvider>
        <Post />
      </MDXProvider>
    </article>
    <button 
      type="button" 
      className="text-sky-900 fixed right-10 bottom-10 p-1"
      onClick={scrollToTop}
    >
      top
    </button>
  </div>
);

• 替代方案（无平滑滚动）：
  如果不需要平滑滚动效果，可以简化成直接设置scrollTop属性：

  const scrollToTop = () => {
    scrollable.current?.scrollTop = 0;
  };
  

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