JavaScript 如何跳转页面

打开网页时，点击按钮后自动跳转到新页面、提交表单后刷新到成功页，这些日常操作大多和页面跳转有关。作为前端开发的核心技术之一，JavaScript实现页面跳转的方式简单实用，用生活场景就能轻松理解。

---

最常用：当前页面直接跳转

日常逛电商时，点击“立即购买”后，当前页面直接切到订单页，用的就是这种最普遍的跳转方式。它的核心是修改浏览器的地址栏地址，用户会看不到跳转前的页面，直接进入新页面。

实现代码只有一行，非常好记：

`javascript

window.location.href = "目标页面地址.html";

`

举个例子，你在个人主页加了个“查看我的作品集”按钮，点击后跳转到作品集页面，只需给按钮加点击事件，触发上面的代码就行。如果想让跳转后不能回退到之前的页面，还可以加个replace()方法，代码变成window.location.replace("目标地址.html")，就像直接替换了当前的浏览记录，退不回去了，适合提交表单后的跳转，避免重复提交。

---

新窗口打开跳转：不覆盖当前页面

有时候你逛新闻网，点击新闻标题后，新内容会在空白标签页打开，原页面还停留在列表页，方便你随时切回去，这就是新窗口跳转的场景。这种方式不会覆盖当前页面，适合需要保留原页面的操作。

对应的代码也很简单：

`javascript

window.open("目标页面地址.html");

`

比如你在博客文章里加了“点击查看作者的知乎专栏”链接，不想让读者关掉当前阅读的文章，用window.open就能让新内容在新标签页打开，不影响原页面的停留。如果想控制新窗口的大小，还能加参数，比如window.open("目标地址.html", "_blank", "width=800,height=600")，就能打开一个固定大小的新窗口，适合弹出登录框、小详情页这类场景。

---

特殊场景的跳转：页面内部锚点跳转

除了跳转到完全不同的页面，有时候你在长网页里，点击目录项直接跳到对应内容段，不用滚动找，这是页面内部的锚点跳转，也算特殊的页面跳转。比如你看百科页面，点击“基本信息”就直接跳到页面上方的对应板块，点击“参考资料”就跳到底部，就是用的这种方式。

实现逻辑是获取要跳转的锚点元素，让页面滚动到它的位置，代码示例：

`javascript

// 点击按钮后，跳转到id为"section3"的内容段

document.getElementById("jumpBtn").addEventListener("click", function() {

document.getElementById("section3").scrollIntoView({ disabled: "smooth" });

});

`

这里的disabled: "smooth"是让跳转有平滑滚动的效果，不会突然跳过去，像翻书一样顺滑，比生硬的跳转体验好很多，现在很多长页面的目录都用这种效果。

这几种JavaScript跳转方式覆盖了绝大多数前端场景，开发时根据需求选就行：想替换当前页面就用location.href，要保留原页面用window.open，长页内跳转到指定位置用锚点跳转，都是易懂好上手的小技巧。