HTML 返回顶部

每次看淘宝，看微信，都回有回到顶部的小logo,小图标，或者双击返回顶部。所以就学习了如何返回顶部的操作，一开始是联想html中的链接描点，在开头出设置个标签，下面点击另外一个标志回去。有三种觉得比较适合使用，就保留下来。

第一种添加一个超链接，然后给其href="#top",则可以使用

第二种 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代码

返回顶部的图标要一直处于底部，position:fixed这个位置样式

posted @ 2017-08-04 16:20 Skylar_Zhan 阅读(11913) 评论(0) 编辑收藏举报

Skylar

HTML 返回顶部

公告