什么是锚点:
就是当页面内元素过长时,能快速定位到指定元素位置
需要目标元素的name或id属性和a标签的href相对应即可;
注:href="#目标元素的name或id名"
1、实现效果:
这里是顶站的锚
美国历任总统
● 第1任(1789-1797)
姓名:乔治·华盛顿
George Washington
生卒:1732-1799
政党:联邦
● 第2任(1797-1801)
姓名:约翰·亚当斯
John Adams
生卒:1735-1826
政党:联邦
● 第3任(1801-1809)
姓名:托马斯·杰斐逊
Thomas Jefferson
生卒:1743-1826
政党:民共
● 第4任(1789-1797)
姓名:乔治·华盛顿
George Washington
生卒:1732-1799
政党:联邦
● 第5任(1797-1801)
姓名:约翰·亚当斯
John Adams
生卒:1735-1826
政党:联邦
● 第6任(1801-1809)
姓名:托马斯·杰斐逊
Thomas Jefferson
生卒:1743-1826
政党:民共
2、代码展示:
<html>
<head>
<title>锚点</title>
</head>
<style>
/* 为了让页面出现滚动条(更好的展示锚点跳转效果。设置页面内容超出) */
a{
display: block;
margin: 50px 0;
}
</style>
<body>
<a name="top">这里是顶站的锚</a><br />
<a href="#1">第1任</a><br />
<a href="#2">第2任</a><br />
<a href="#3">第3任</a><br />
<a href="#4">第4任</a><br />
<a href="#5">第5任</a><br />
<a href="#6">第6任</a><br />
<h2>美国历任总统</h2>
<a name="1">● 第1任(1789-1797)</a><br />
姓名:乔治·华盛顿<br />
George Washington<br />
生卒:1732-1799<br />
政党:联邦<br />
<a name="2">● 第2任(1797-1801)</a><br />
姓名:约翰·亚当斯<br />
John Adams<br />
生卒:1735-1826<br />
政党:联邦<br />
<a name="3">● 第3任(1801-1809)</a><br />
姓名:托马斯·杰斐逊<br />
Thomas Jefferson<br />
生卒:1743-1826<br />
政党:民共<br/>
<a name="4">● 第4任(1789-1797)</a><br />
姓名:乔治·华盛顿<br />
George Washington<br />
生卒:1732-1799<br />
政党:联邦<br />
<a name="5">● 第5任(1797-1801)</a><br />
姓名:约翰·亚当斯<br />
John Adams<br />
生卒:1735-1826<br />
政党:联邦<br />
<a name="6">● 第6任(1801-1809)</a><br />
姓名:托马斯·杰斐逊<br />
Thomas Jefferson<br />
生卒:1743-1826<br />
政党:民共<br/>
<a href="#top">回到顶点</a><br />
</body>
</html>
总结
欢迎查阅其他文章~如有疑问或者不当处还请不吝赐教。。。