来来来，我们来聊聊项目的新需求。
一个团队介绍页面，初始展现为全部人员，标题分为全部成员和创作团队，行政团队等。
点击创作团队时，要求在当前页面跳转到创作团队，点击全部成员时跳转到第一行人员介绍处。
我的初始思路是获取每个团队人员介绍的位置，触发点击事件时，可以跳转到相应位置。然后就开始各种查资料，试图用各种方法解决这个平滑滑动的效果。
两个小时过去了，各种配置各种安装，写了N个bug之后，无奈求助，发现，思路错了！
有个非常简单的方法可以实现这个效果。
那就是 HTML5 的锚点。
首先，来聊聊锚点是什么。
你还记得HTML中的a标签吗？
概念：<a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。
但严格来说，<a>元素不是一个链接，而是超文本锚点，可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话，可以作为原本链接位置的占位符，常用于home链接。
[注意]任何文档流内容都可以被嵌套，只要不是交互内容类别(如按钮、链接等)
href属性表示地址，有三种情况：
1.链接地址
<a href="http://www.baidu.com">百度</a>
2.下载地址
<a href="test.zip">下载测试</a>
3.锚点
(1）href:#id名
<a href="#test">目录</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="test" style="height: 200px;width: 200px; border: 1px solid black;margin-bottom: 300px;">内容</div>
（2）href:页面地址#id名
<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>
注意：href属性不要留空，若暂时不需要写地址，就写#或者JavaScript：;因为如果href 留空，会刷新页面。
写完这些，大牛们恐怕已经看得很不耐烦，基础不错的小伙伴们应该也恍然大悟了，至于一头雾水的，继续看下面实例吧。
对我描述的需求一头雾水的，不耐烦看的，感兴趣的可以直接复制代码，试一下就明白了，拿走不谢。
一、页面内跳转的锚点设置
页面内的跳转需要两步：
方法一：
①：设置一个锚点链接<a href="#libai">我是李白</a>；（注意：href属性的属性值最前面要加#）
②：在页面中需要的位置设置锚点<a name="libai"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容
方法二：
①：同方法一的①
②：设置锚点的位置 <h3 id="libai">我是李白</h3>；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#
方法二不用单独添加一个a标签来专门设置锚点 ，只在需要的位置的标签中添加一个id即可。
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>我是诗人锚点</title>
</head>
<body>
<ul>
<li><a href="#libai">我是李白</a></li>
<li><a href="#dufu">我是杜甫</a></li>
<li><a href="#baijuyi">我是白居易</a></li>
</ul>
<a name="libai"></a><!--设置锚点方法1-->
<h3 id="libai">我是李白</h3><!--设置锚点方法2-->
<p>我是李白~</p>
<p>我是李白~</p>
<p>我是李白~</p>
<p>我是李白~</p>
<p>我是李白~</p>
<p>我是李白~</p>
<p>我是李白~</p>
<h3 id="dufu">我是杜甫</h3><!--设置锚点方法2-->
<a name="dufu"></a>
<p>我是杜甫~</p>
<p>我是杜甫~</p>
<p>我是杜甫~</p>
<p>我是杜甫~</p>
<p>我是杜甫~</p>
<p>我是杜甫~</p>
<h3 id="dufu">我是白居易</h3><!--设置锚点方法2-->
<a name="baijuyi"></a>
<p>我是白居易~</p>
<p>我是白居易~</p>
<p>我是白居易~</p>
<p>我是白居易~</p>
<p>我是白居易~</p>
<p>我是白居易~</p>
</body>
</html>
网友评论