一、理解HTML<a>标签
<a>标签定义锚（anchor）,它有两种用法：
1.通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
2.通过使用 name 或 id 属性，创建一个文档内部的书签（也就是说，可以创建指向文档片段的链接）
二、name与id
1.创建文档内部书签
1 <h1>HTML 教程目录</h1> 2 <ul> 3 <li><a href="#C1">第一章</a></li> 4 <li><a href="#C2">第二章</a></li> 5 <li><a href="#C3">第三章</a></li> 6 <li><a href="#C4">第四章</a></li> 7 <li><a href="#C5">第五章</a></li> 8 <li><a href="#C6">第六章</a></li> 9 <li><a href="#C7">第七章</a></li> 10 <li><a href="#C8">第八章</a></li> 11 </ul> 12 13 <div style="width:100%; height:600px; border:1px solid #F00">距离拉大效果好</div> 14 <h2><a name="C1">第一章</a></h2> 15 <p>本章讲解的内容是 ... ...</p> 16 <h2><a name="C2">第二章</a></h2> 17 <p>本章讲解的内容是 ... ...</p> 18 <h2><a name="C3">第三章</a></h2> 19 <p>本章讲解的内容是 ... ...</p> 20 <h2><a name="C4">第四章</a></h2> 21 <p>本章讲解的内容是 ... ...</p> 22 <h2><a name="C5">第五章</a></h2> 23 <p>本章讲解的内容是 ... ...</p> 24 <h2><a name="C6">第六章</a></h2> 25 <p>本章讲解的内容是 ... ...</p> 26 <h2><a name="C7">第七章</a></h2> 27 <p>本章讲解的内容是 ... ...</p> 28 <h2><a name="C8">第八章</a></h2> 29 <p>本章讲解的内容是 ... ...</p>
2.name与id的延伸阅读
---原文来自W3cschool:
在 HTML 4.0 之前的版本中，只有使用 <a> 标签的 name 属性才能创建片段标识符。随着 HTML 4.0 中 id 属性的出现，所有 HTML 或 XHTML 元素都可以是片段标识符。这是因为 id 标识符几乎可以用在所有的标签中。<a> 标签为了能够和以前的版本相兼容而保留了 name 属性，同时也可以使用 id 属性。这些属性可以相互交换使用，可以把 id 属性看作是 name 属性的升级版本。name 和 id 属性都可以与 href 属性结合起来使用，这样一个 <a> 标签就可以同时作为超链接和片段标识符使用。
可以简单地将片段标识符看作是对许多编程语言中普遍使用的 goto 语句标签的 HTML 模拟。<a> 标签中的 name 属性或者 <a> 或其他标签中的 id 属性会在文档中放置一个标识。当标签用于链接到该文档时，就等于告诉浏览器要转到（goto）该标识。
id 或 name 属性的值可以是引号引起来的任何字符串。字符串必须是唯一的标记，不能在同一文档中的其他 name 或 id 属性中重复使用，但是可以在不同的文档中再次使用。
1 如果使用 id 属性，上面的实例可改写为： 2 <a id="#C1">第一章</a> 3 <a id="#C2">第二章</a> 4 <a id="#C3">第三章</a> 5 <a id="#C3">第四章</a> 6 ... 7 8 或者直接在标题中设置 id 属性： 9 <h2 id="#C1">第一章</h2> 10 <h2 id="#C2">第二章</h2> 11 <h2 id="#C3">第三章</h2> 12 <h2 id="#C3">第四章</h2> 13 ...
三、配合onscroll事件制作返回顶部特效
当浏览器滚动条滚动时会触发 onscroll 事件，通常情况下指上下滚动条滚动。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 #top_div{ 7 position:fixed; 8 bottom:80px; 9 right:0; 10 display:none; 11 } 12 </style> 13 14 <script type="text/javascript"> 15 16 window.onscroll = function(){ 17 var t = document.documentElement.scrollTop || document.body.scrollTop; 18 var top_div = document.getElementById( "top_div" ); 19 if( t >= 300 ) { 20 top_div.style.display = "inline"; 21 } else { 22 top_div.style.display = "none"; 23 } 24 } 25 26 </script> 27 28 </head> 29 <body> 30 <a name="top">顶部<a> 31 <div id="top_div"><a href="#top">返回顶部</a></div> 32 <br /> 33 <br /> 34 <div style="width:100%; height:1600px; border:1px solid #F00">距离拉大效果好</div> 35 36 </body> 37 </html>
<!--分析
- 在<style>标签中首先定义 top_div css 属性：position:fixed;display:none; 是关键
- javascript 语句中，t 得到滚动条向下滚动的位置，|| 是为了更好兼容性考虑
- 当滚动超过 300 （像素）时，将 top_div css display 属性设置为显示(inline)，反之则隐藏(none)
- 必须设定 DOCTYPE 类型，在 IE 中才能利用 document.documentElement 来取得窗口的宽度及高度
-->