简单实现点击后页面跳转的方法

文章目录

1. 1. 同一页面内跳转到指定元素
   1. 1.1. 方法1：给a标签设置锚点
   2. 1.2. 方法2：设置 location.hash 属性
2. 2. 不同页面的跳转
   1. 2.1. 方法1：设置a标签的href属性
   2. 2.2. 方法2：设置 location.href 属性

同一页面内跳转到指定元素

方法1：给a标签设置锚点

HTML

<a href="#abc">a标签</a>
<div style="height: 1000px"></div>
<p id="abc">p标签</p>

点击a标签的时候，页面会跳转到p标签所在的位置。

a标签的href属性只给#时，会跳转到页面最顶部，可实现“回到顶部”的功能。

<a href="#">a标签</a>

方法2：设置 location.hash 属性

HTML

<button>跳转</button>
<div style="height: 1000px"></div>
<p id="abc">p标签</p>

javaScript

var btn = document.querySelector("button");
btn.onclick = function(){
    location.hash = "#abc";
};

通过设置 window 的属性 location.hash 锚点值为指定元素的id，即可实现跳转到指定元素。

不同页面的跳转

方法1：设置a标签的href属性

HTML

<a href="B.html">跳转</a>

设置a标签的href属性值为要跳转的页面的路径，即可实现从A页面跳转到B页面。

方法2：设置 location.href 属性

HTML

<button>跳转</button>

javaScript

var btn = document.querySelector("button");
btn.onclick = function(){
    location.href = "B.html";
};

通过设置 window 的属性 location.href 值为要跳转的页面路径，即可实现实现从A页面跳转到B页面。