HOWTO · JavaScript
JavaScript 滚动到页面顶部
使用 JavaScript 回到网页顶部。比较立即跳转、平滑滚动、锚点链接，以及可选的 jQuery 动画。
本页内容
使用 window.scrollTo(0, 0) 将当前页面滚动到顶部。若要将此操作绑定到按钮，请添加点击事件监听器；若希望浏览器以动画方式滚动，则传入 { top: 0, behavior: "smooth" }。
使用 window.scrollTo() 返回页面顶部
此示例会创建一个按钮，并将其连接到 window.scrollTo()。请在文档 body 可用后将脚本放入页面，或使用 defer 加载脚本，以便按钮能够添加到文档中。示例中的简易回退对象让代码可以在 Node 测试夹具中运行；在浏览器中，它会使用页面实际的 document 和 window。
const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
const pageDocument = inBrowser ? document : {
body: {
append(button) {
button.click = () => button.listeners.click();
}
},
createElement() {
return {
listeners: {},
addEventListener(name, handler) {
this.listeners[name] = handler;
}
};
}
};
const pageWindow = inBrowser ? window : {
scrollTo(x, y) {
console.log(`scrollTo(${x}, ${y})`);
}
};
const button = pageDocument.createElement("button");
button.type = "button";
button.textContent = "Back to top";
pageDocument.body.append(button);
button.addEventListener("click", () => {
pageWindow.scrollTo(0, 0);
});
if (!inBrowser) button.click();
scrollTo(0, 0)
两个参数分别表示水平和垂直滚动位置。将它们都设为 0，即可返回页面左上角。若需要立即跳转，可使用这种即时滚动方式，例如在简短操作之后滚动，避免动画造成干扰。
使用 window.scrollTo() 实现平滑滚动
向 window.scrollTo() 传入选项对象，即可请求平滑滚动。此独立示例使用相同的简易 Node 回退，因此可以在浏览器之外演示点击处理程序：
const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
const pageDocument = inBrowser ? document : {
body: {
append(button) {
button.click = () => button.listeners.click();
}
},
createElement() {
return {
listeners: {},
addEventListener(name, handler) {
this.listeners[name] = handler;
}
};
}
};
const pageWindow = inBrowser ? window : {
scrollTo(options) {
console.log(`scrollTo(top: ${options.top}, behavior: ${options.behavior})`);
}
};
const button = pageDocument.createElement("button");
button.type = "button";
button.textContent = "Back to top";
pageDocument.body.append(button);
button.addEventListener("click", () => {
pageWindow.scrollTo({ top: 0, behavior: "smooth" });
});
if (!inBrowser) button.click();
scrollTo(top: 0, behavior: smooth)
top 属性用于设置垂直滚动目标，behavior: "smooth" 则请求浏览器为滚动添加动画。原生选项形式不提供时长设置。若需要指定时长，可以使用库提供的动画功能，或自行实现动画。也可以通过页面级 CSS 规则（例如 html { scroll-behavior: smooth; }）让普通滚动变得平滑，但这条规则本身不会创建按钮，也不会实现返回页面顶部的操作。
使用锚点链接跳转到页面顶部
锚点是一种无需脚本的实用方案。为页面顶部添加一个 ID，例如 <header id="page-top">，然后使用 <a href="#page-top">Back to top</a> 创建指向它的链接。此示例中的链接文字仍为英文“Back to top”，因为代码保持原样。激活链接后，浏览器会导航到该片段、更新 URL 片段，并按照浏览器行为将焦点或导航移至目标位置。请确保目标在页面中只出现一次；如果固定页眉遮住了目标，可以在目标上使用 scroll-margin-top 等 CSS 属性进行调整。
使用 jQuery 滚动到页面顶部
如果页面已经加载了 jQuery，可以使用它的 animate() 方法，为文档滚动元素的 scrollTop 属性添加动画。此示例会添加一个按钮并绑定动画。在浏览器中，请先于此脚本加载 jQuery；如果缺少 jQuery，示例会抛出明确的错误。简易回退仅供 Node 测试夹具使用。
const inBrowser = typeof document !== "undefined" && typeof window !== "undefined";
if (inBrowser && typeof globalThis.jQuery !== "function") {
throw new Error("jQuery is required for this example. Load jQuery before this script.");
}
const $ = inBrowser ? globalThis.jQuery : (selector, attributes) => {
if (selector === "<button>") {
return {
...attributes,
appendTo() { return this; },
on(name, handler) { this.handler = handler; return this; }
};
}
return {
animate(properties, duration) {
console.log(`animate(scrollTop: ${properties.scrollTop}, duration: ${duration})`);
}
};
};
const button = $("<button>", {
type: "button",
text: "Back to top"
}).appendTo("body");
button.on("click", () => {
$("html, body").animate({ scrollTop: 0 }, 800);
});
if (!inBrowser) button.handler();
animate(scrollTop: 0, duration: 800)
这里的 scrollTop: 0 是滚动目标，800 是动画时长，单位为毫秒。jQuery 是可选依赖；如果页面本身不需要这个库，请使用原生方法。若要添加自定义动画或其他动态效果，请尊重访客的减少动态效果偏好。
选择合适的方法
若要通过 JavaScript 直接跳转，请使用 window.scrollTo(0, 0)。需要平滑滚动且浏览器控制的时长足够时，可选择选项形式。若希望操作像普通页面导航一样无需 JavaScript 即可使用，请采用锚点。若项目已经使用 jQuery，且其时长参数适合此交互，也可以选择 jQuery。在单页应用中，如果应用本身不会管理滚动位置，可在路由或视图切换后调用原生方法。对于普通链接或按钮，应让辅助技术能够清楚识别控件的用途，并确保键盘用户可以操作它。
