每次看淘宝，看微信，都回有回到顶部的小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的值来跳转到页面的具体位置。

 <!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;

 }

CSS代码

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

HTML 返回顶部的更多相关文章

  1. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

  2. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  3. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

  4. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  5. js返回顶部效果

    当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...

  6. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  7. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  8. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  9. 网页返回顶部之animate方法

    点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...

  10. jQuery 一句代码返回顶部

    兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="po ...

随机推荐

  1. Linux进程实践(3) --进程终止与exec函数族

    进程的几种终止方式 (1)正常退出 从main函数返回[return] 调用exit 调用_exit/_Exit (2)异常退出 调用abort   产生SIGABOUT信号 由信号终止  Ctrl+ ...

  2. map.js的编写（js编写一个对象的方式）

    // 定义map function Map() { this.container = {}; } // 将key-value放入map中 Map.prototype.put = function(ke ...

  3. （二十六）静态单元格（Cell）

    制作类似iOS系统设置的页面,如果使用代码来实现,将会比较麻烦,可以通过静态单元格技术方便的实现. 注意:静态单元格只支持TableViewController. 可以通过storyboard直接操作 ...

  4. 《java入门第一季》之面向对象（方法重写问题）

    方法重载的引入:根据一个案例: /* 继承中成员方法的关系: A:子类中的方法和父类中的方法声明不一样,这个太简单. B:子类中的方法和父类中的方法声明一样,这个该怎么玩呢? 通过子类对象调用方法: ...

  5. Android 几种网络请求的区别与联系

    HttpUrlConnection 最开始学android的时候用的网络请求是HttpUrlConnection,当时很多东西还不知道,但是在android 2.2及以下版本中HttpUrlConne ...

  6. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  7. x265 (HEVC编码器，基于x264) 介绍

    x265要出来了.简单翻译了一下项目网站首页的介绍. x265是一个开源项目,是一个将视频编码为h.265/高效率的视频编码(HEVC)格式的免费的库,在GNU GPL条款下发布.它的源代码是免费提供 ...

  8. Media Player Classic - HC 源代码分析 1：整体结构

    ===================================================== Media Player Classic - HC 源代码分析系列文章列表: Media P ...

  9. Google主推-Android开发利器——Android Studio，这可能是最全的AS教程！

    Android Studio使用手册 "工欲善其事必先利其器" 作为一个Android开发人员来说,一款好的开发工具也是相当重要的,在相当长的时间礼,Google都是基于Eclip ...

  10. https认证

    HTTPS认证 说明 1. HTTPS协议的站点信息更加安全,同时可降低网站被劫持的风险,如网站同时存在HTTP和HTTPS站点,可使用本工具进行认证,便于百度搜索识别网站HTTP与HTTPS之间的对 ...