在 JavaScript 中，“点击跳转”最核心的操作就是操作 window.location 对象。根据你的具体需求（是否保留历史记录、是否新窗口打开），主要有以下几种实现方式：


1. 最常用：模拟点击链接（可后退）


相当于用户点击了一个 <a> 标签，会生成历史记录，用户可以点击浏览器的“后退”按钮返回。


// 最简单的写法

window.location.href = "https://www.example.com";



// 或者使用 assign 方法（效果完全一样）

window.location.assign("https://www.example.com");

2. 替换当前页（不可后退）


相当于 location.replace()，跳转后覆盖当前页面的历史记录，用户无法通过“后退”按钮回到原页面。常用于登录成功后跳转首页。


window.location.replace("https://www.example.com");

3. 新窗口/新标签页打开


使用 window.open()，相当于鼠标右键“在新标签页中打开链接”。


// _blank 代表新窗口，_self 代表当前窗口（默认）

window.open("https://www.example.com", "_blank");


4. 绑定到点击事件的具体写法


根据你的 HTML 结构，有两种绑定方式：


方式一：写在 HTML 标签内（极简）


<button onclick="window.location.href='https://www.example.com'">点击跳转</button>

<!-- 或者直接简写 -->

<button onclick="location.href='https://www.example.com'">点击跳转</button>

方式二：使用 JS 事件监听（推荐，结构与行为分离）


<button id="myBtn">点击跳转</button>



<script>

  document.getElementById('myBtn').addEventListener('click', function() {

    window.location.href = 'https://www.example.com';

  });

</script>


5. 针对 <a> 标签的特殊情况


如果你用的是 <a> 标签，但想用 JS 控制跳转逻辑（比如先校验表单），必须阻止默认行为，否则会触发两次跳转：


<a href="https://www.example.com" id="myLink">点我</a>



<script>

  document.getElementById('myLink').addEventListener('click', function(e) {

    e.preventDefault(); // 阻止默认的 href 跳转



    // 在这里写你的校验逻辑...

    console.log('校验通过，执行跳转');



    // 最后执行 JS 跳转

    window.location.href = this.href; 

  });

</script>


6. 特殊场景：页面内锚点跳转（不刷新页面）


如果只想在当前页面内滚动到某个 ID 位置（不请求新页面），可以直接修改 hash：


// 滚动到 id 为 section1 的元素位置

window.location.hash = 'section1'; 



// 或者平滑滚动（现代浏览器）

document.getElementById('section1').scrollIntoView({ behavior: 'smooth' });