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的值来跳转到页面的具体位置。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8"/>

     <title>返回顶端</title>

     <link rel="stylesheet" type="text/css" href="hello.css">

 </head>

 <body id="goTop">

     <div class="box">

         <img src="1.jpg">

         <img src="1.jpg">

         <img src="1.jpg">

     </div>

     <a href="javascript:window.scrollTo(0,0)" class="btn" title="回到顶端"></a>

 </body>

 </html>

 *{

     margin: ;

     padding: ;

 }

 .box{

     width: 1000px;

     margin:  auto;

 }

 .btn{

     width: 40px;

     height: 40px;

     position: fixed;

     bottom: 30px;

     background-color: #aaa;

     border:1px solid #;

     border-radius: %;

     left: %;

     margin-left:500px;

 }

 .btn:after{

     content: "";

     width:16px;

     height:16px;

     border-left:2px solid #;

     border-bottom: 2px solid #;

     position: absolute;

     left: 12px;

     top: 15px;

     transform :rotate(135deg);

 }

 .btn:hover{

     background-color: #fff;

 }