html页面中锚点定位及最简单的跳转方式，你了解吗
已被阅读 1214 次 | 文章分类:html | 2021-03-15 00:43
大家经常会看到很多网页是左侧目录，右侧是内容的布局方式;而且点击左侧目录菜单,右侧内容会跳转的对应方式，这种就叫做锚点定位；下面是两种最简单的方式
一 利用a标签的href属性和div标签的id属性
将a标签的href属性设置为一个#号加被跳转div的id的方式,如 href="#div1",边可以轻松跳转；很简单，不需要写一行javascript代码即可实现;全部代码和演示效果如下
<!doctype HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<style>
html,body{
width: 100%;
height: 100%;
}
.wrapper{
width:100%;
height:500px;
}
#div1{
background:red;
}
#div2{
background:gray;
}
#div3{
background:yellow;
}
</style>
</head>
<body>
<!-- 锚点用a标签的href属性实现 -->
<div style="position:fixed;top:10px;right:10px;background-color: white;">
<p>
<a href="#div1">锚点1</a>
</p>
<p>
<a href="#div2">锚点2</a>
</p>
<p>
<a href="#div3">锚点3</a>
</p>
</div>
<div class="wrapper" id='div1'>
锚点1的位置
</div>
<div class="wrapper" id='div2'>
锚点2的位置
</div>
<div class="wrapper" id='div3'>
锚点3的位置
</div>
</body>
</html>
可以看出再切换的过程中，地址栏实时将a标签的href属性值添加到地址后面
二 利用div元素的scrollIntoView()方法
非常的简单 就一句javascript代码；document.getElementById("div4").scrollIntoView();
在前面代码基础上加入第二种方法如下
<!doctype HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<style>
html,body{
width: 100%;
height: 100%;
}
.wrapper{
width:100%;
height:500px;
}
#div1{
background:red;
}
#div2{
background:gray;
}
#div3{
background:yellow;
}
#div4{
background:pink;
}
</style>
</head>
<body>
<!-- 锚点用a标签的href属性实现 -->
<div style="position:fixed;top:10px;right:10px;background-color: white;">
<p>
<a href="#div1">锚点1</a>
</p>
<p>
<a href="#div2">锚点2</a>
</p>
<p>
<a href="#div3">锚点3</a>
</p>
<p>
<a href="javascript:void(0)" onclick="locate()">锚点4</a>
</p>
</div>
<div class="wrapper" id='div1'>
锚点1的位置
</div>
<div class="wrapper" id='div2'>
锚点2的位置
</div>
<div class="wrapper" id='div3'>
锚点3的位置
</div>
<div class="wrapper" id='div4'>
锚点4的位置
</div>
<script>
function locate(){
document.getElementById("div4").scrollIntoView();
}
</script>
</body>
</html>
通过上面两种方法便可以实现基本的需求，如果有精确定位到锚点的需求，则可以借助javascript和页面高度等属性计算实现;