在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在php中文网介绍html 锚点三种实现方法
1） . 在同一页面中
<a name="add"></a>或者 <a id="add"></a>（ps：用id兼容性好些）
<a href="#add">跳转到add</a>
2） . 在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点
<a href="a.html#add">跳转到a.add</a>
3） . 点击链接触发js事件，同时跳转到锚点，有两种处理方式：
第一种：
<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>
第二种：
<p id="pNode"></p>
<a href="#" onclick="document.getElemetnById('pNode').scrollIntoView(true)return false">通过scrollIntoView实现锚点效果</a>
scrollIntoView()的用法
scrollIntoView 是一个与页面（容器）滚动相关的API（ 官方解释 ），该API只有boolean类型的参数能得到良好的支持（firefox 36+都支持），所以在这里只讨论参数Boolean类型的情况
调用方法为 element.scrollIntoView() 参数默认为true。
参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；
参数为false时，使element的底部与视图（容器）底部对齐。
TIPS：页面（容器）可滚动时才有用！
在html中设置锚点定位我知道的有几种方法，在此和大家分享一下：1、使用id定位：
这样的定位可以针对任何标签来定位。
2、使用name定位：
使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。
3、使用js定位
锚点--是网页的超链接中的一种，也叫做命名锚点，通过name来定位。可以实现在同一页页面中进行链接，很常用，它的英文名称是anchor，也是用a标签来链接的。它的作用是链接同一个页面的某一个章节。
1、首先打开一个HTML页面，不同的软件有不同的打开方式，下面是用Adobe Dreamweaver软件来打开一个页面的。
2、基本代码如下所示。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
3、在body里面填写如下的代码。
<body>
<a href="q.html#p1">文字1</a>
<a href="q.html#p2">文字2</a>
<a href="q.html#p3">文字3</a>
<a name="p1"></a>
<p>p1段落</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<a name="p2"></a>
<p>p2段落</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<a name="p3"></a>
<p>p3段落</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
</body>
4、锚点的格式代码
<a name="p3"></a>
<p>p3段落</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
<p>------------------</p>
5、运行结果如下所示：点击【段落2】会立马跳转到段落2中。
6、完成效果图。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）