HTML网页制作：制作锚点链接_随笔

右击桌面，新建一个文本文档。

打开文档，输入需要写的HTML代码，如下图所示：

<html>

<head>

<title>简单html页面</title>

</head>

<body>

</body>

</html>

点击文件中的保存文档。

选择用浏览器的方式打开文档，就可以看到我们刚刚编辑的锚点链接了。

在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在php中文网介绍html 锚点三种实现方法

1） . 在同一页面中

<a name="add"></a>或者 <a id="add"></a>（ps：用id兼容性好些）

2） . 在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点

3） . 点击链接触发js事件，同时跳转到锚点，有两种处理方式：

第一种：

<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>

第二种：

<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网页制作：制作锚点链接