在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在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：页面（容器）可滚动时才有用！
比如现在有t1.html和t2.html两个页面，t1页面中需要设置超链接跳转到t2页面中的锚点a1位置，则需要按如下步骤进行设置：
1、t1页面中设置超链接href属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t1页面</title>
<style>
html,body{margin:0padding:0background-color:#ccc}
.anchor{display:blockpadding:5px 10pxbackground-color:#aaa}
</style>
</head>
<body>
<a href="./t2.html#a1" target="_blank" class="anchor">跳转到t2页面a1</a>
</body>
</html>
2、t2页面中设置锚点元素的ID为a1。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t2页面</title>
<style>
html,body{margin:0padding:0background-color:#ccc}
.anchor{display:blockpadding:5px 10pxbackground-color:#aaa}
.placeholder{height:800pxpadding:5px}
</style>
</head>
<body>
<div class="placeholder">占位div1</div>
<a id="a1" href="#" class="anchor">锚点a1</a>
<div class="placeholder">占位div2</div>
</body>
</html>
3、浏览器中打开t1页面（以Chrome浏览器为例，其他浏览器 *** 作一样）。
4、点击“跳转到t2页面a1”，Chrome浏览器会新开一个标签页打开t2页面，此时锚点a1在浏览器可视范围内并且位于页面的顶端。这样，外部锚点链接就设置成功了。
锚标记用法：链接到同一文档中的特定位置叫做锚链接。
锚的使用方法是选择一个目标定位点，用来创建一个定位标记，用<a>标记的name属性的值来确定
定位标记名称。格式为：
<a name="定位标记名">
属性 name 用于创建一个命名的锚。当使用一个命名的锚，我们可以创建一个直接跳转到页面的指
定部分的链接，而不需要让读者通过滚动条拖动来找他/她需要的部分。
下面是创建一个命名锚的语法：
<a name="label">Text to be displayed</a>
属性 name 用于创建一个命名的锚。锚的名称可以使用你喜欢的文本来命名。
下面一行定义了一个命名的锚：
<a name="tips">Useful Tips Section</a>
然后在网页的任何地方建立对这个目标标记的链接，在标题上建立的链接地址名字要和定位标记名相同，前面还要加上"#"号。格式为：
<a href="#定位标记名">
一个命名锚在显示时与普通链接没什么特别不同之处。
为了直接链接到“要点”部分，一般需要在所请求的 URL 末尾加上符号 # 以及锚名称，象这样：
<a href="Jump'>http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>
到文件 "html_links.asp" 内部(一个页面内部)的可用锚链接的语法如下：
<a href="#tips">Jump to the Useful Tips Section</a>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）