<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.c1{
background-color: green;
width: 200px;
height: 500px;
border: 2px solid;
}
.c2{
background-color:blue;
width: 200px;
height: 800px;
border: 2px solid;
}
.s1{
position: fixed; /*固定标签，位置是根据浏览器窗口来的*/
bottom: 20px;
left: 20px;
background-color: red;
height: 40px;
width: 80px;
text-align: center;/*水平居中*/
line-height: 40px; /*跟height设置的高度一样高就可以*/
}
.s1 a{
color: white;
text-decoration: none;/*去掉下划线 */
}
</style>
</head>
<body>
<a name="top">这里是顶部</a>
<div id="top">这里是顶部</div>
<div class="c1"></div>
<div class="c2"></div>
<span class="s1">
<a href="#top">回到顶部</a>
</span>
</body>
</html>
小结：
<!-- <a name="top">这里是顶部</a> --> 两个都可以，要么对应a标签的name值或者id
<div id="top">这里是顶部</div>
<span class="s1">
<a href="#top">回到顶部</a>
</span>
</body>
<!-- <!-- <a name="top">这里是顶部</a> 锚点
<div id="top">这里是顶部</div> 锚点
<div class="c1"></div>
<div class="c2"></div>
<span class="s1">
<a href="#top">回到顶部</a> 触发锚点
</span>