a标签锚点实现超链接

最新推荐文章于 2024-01-07 15:41:55 发布

@码上行动

最新推荐文章于 2024-01-07 15:41:55 发布

阅读量712

点赞数 2

分类专栏： html 基础文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/weixin_45935734/article/details/120216369

版权

html 基础专栏收录该内容

24 篇文章

订阅专栏

锚点demo

什么是锚点：

就是当页面内元素过长时，能快速定位到指定元素位置
需要目标元素的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>