Home > Article > Web Front-end > 设置锚点的三种方法_html/css_WEB-ITnose
设置锚点的三种方法_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:46:351782browse
最网页中经常会用到锚点来定位，这里就和大家说说我知道的三种锚点的使用目前我就知道三种，更多的方法暂时没去研究，有的话大家帮忙补充。现在和大家说的主要是最常用最简单的方法。
1.使用 id 定位
先和大家说说最常用的 ID定位 ，这几乎是所有网站最常用的一种定位方式了。这种定位最大的好处就是可以针对任何标签来定位
使用说明：设置一个锚点 id,然后用 href 属性点位到该锚点id,具体实例代码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> li{ display: block; margin-bottom: 4px; width: 100px; height: 20px; background: #eee; text-align: center; } </style> <body> <li> <a href="#a">定位到A</a> </li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li id="a">⇒A</li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li> </body></html> 由于代码有点长，所以下面的代码基于上面的代码进行简略。大家可以电脑上自己试试。
2.使用 name 定位
第二种定位的方式就有所限制了，使用 name 定位只用于 标签,其他的标签就不管用了。
... ...<body> <li> <a href="#a">定位到A</a> </li>... ...<li> <a name="a">定位到A</a> </li>... ...</body>
3.使用 js 定位
第三种方式的使用就如下面的，不过我不是很喜欢这种用法。
... ...<body> <li onclick="javascript:document.getElementById('here').scrollIntoView()"> </li>... ...<li> <a name="a">定位到A</a> </li>... ...</body> 对于上面的三种用法，大家不一定都用的到，用到的也许就只有第一种。自然我这边也是推荐大家用第一种。
在运行代码的时候，大家会发现锚点都是用跳的，完全没有过渡的效果。不过没关系，这也是我写这篇文章奠定基础的原因。我会在我接下来的文章里和大家介绍锚点跳转时屏幕滚动的效果。《前端屏幕滚动效果》
谢谢大家查阅我的文章，希望能帮到你，^_^
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS常见技巧总结_html/css_WEB-ITnoseNext article：自适应内部元素_html/css_WEB-ITnose