HTML返回顶部
每次看淘宝，看，都回有回到顶部的⼩logo,⼩图标，或者双击返回顶部。所以就学习了如何返回顶部的操作，⼀开始是联想html中的链接描点，在开头出设置个标签，下⾯点击另外⼀个标志回去。有三种觉得⽐较适合使⽤，就保留下来。
第⼀种添加⼀个超链接，然后给其href="#top"，则可以使⽤
  <a href="#top" class="btn" title="回到顶端"></a>
第⼆种 href指向特定的id
<body id="goTop">
<div class="box">
<img src="1.jpg">
<img src="1.jpg">
<img src="1.jpg">
</div>
<a href="#goTop" class="btn" title="回到顶端"></a>
</body>
第三种　⽤scrollTo(0,0)中的x、y的值来跳转到页⾯的具体位置。
1 <!DOCTYPE html>
2 <html>
3 <head>
4    <meta charset="UTF-8"/>
5    <title>返回顶端</title>
6    <link rel="stylesheet" type="text/css" href="hello.css">
7 </head>
8 <body id="goTop">
9    <div class="box">
10        <img src="1.jpg">
11        <img src="1.jpg">
12        <img src="1.jpg">
13    </div>
14    <a href="javascript:window.scrollTo(0,0)"class="btn" title="回到顶端"></a>
15 </body>
16 </html>
1 *{
2    margin: 0;
3    padding: 0;
4 }
5 .box{
6    width: 1000px;
7    margin: 0 auto;
8
9 }
10 .btn{
11    width: 40px;
12    height: 40px;
13    position: fixed;
14    bottom: 30px;
15    background-color: #aaa;
16    border:1px solid #333;
17    border-radius: 50%;
18    left: 50%;
19    margin-left:500px;
20
21 }
22 .btn:after{
23    content: "";
24    width:16px;
25    height:16px;
26    border-left:2px solid #333;
27    border-bottom: 2px solid #333;
28    position: absolute;
29    left: 12px;
30    top: 15px;
31    transform :rotate(135deg);
32
33 }
34 .btn:hover{
35    background-color: #fff;
36 }
CSS代码
html代码转链接
返回顶部的图标要⼀直处于底部，position:fixed这个位置样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。