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的值来跳转到页面的具体位置。
<!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 返回顶部的更多相关文章
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
- zepto返回顶部动画
点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...
- js实现返回顶部功能的解决方案
很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...
- js返回顶部效果
当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮 ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- qq空间返回顶部代码
点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jquery返回顶部，支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- 网页返回顶部之animate方法
点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...
- jQuery 一句代码返回顶部
兼容各大主流浏览器,jQuery返回顶部,一句代码搞定 <a class="top" href="javascript:;" style="po ...
随机推荐
- Mahout系列之----距离度量
x = (x1,...,xn) 和y = (y1,...,yn) 之间的距离为 (1)欧氏距离 EuclideanDistanceMeasure (2)曼哈顿距离 ManhattanDis ...
- Linux System Programming --Chapter Six
这一章的题目是--高级进程管理,这篇文章将以书中所叙的顺序进行讲解 1.让出处理器 Linux提供一个系统调用运行进程主动让出执行权:sched_yield.进程运行的好好的,为什么需要这个函数呢?有 ...
- Win8 HTML5与JS编程学习笔记（一）
微软的Visual Studio提供了多种构成win8应用的方式,其中最让我感到激动的是基于网页设计语言的开发模式,它提供了结合HTML5与Javascript来开发应用的方法,通过这种方法进行开发, ...
- 重装Windows后修复Linux引导
装了双系统(Windows和Linux)的机器重新安装Windows后会导致Linux的引导丢失而无法进入原先的Linux系统[其原因是Windows会覆盖原先MBR中的Linux的BootLoade ...
- 超过1个G免费资源，16套质量超高风格多样的移动UIKIT
编者按:前两天发了一篇价值4000元的收费可商用Web 模版,今天来一波同样高质量的的App UI KIT,包括音乐/餐厅/运动等等类型的App,无论是下载来学习还是商用(对的可商用!)都不容错过,@ ...
- ITU-T Technical Paper： IP网络测量模型
本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...
- Android UI技巧（一）——Android中伸缩自如的9patch图片切法，没有美工自给自足
Android UI技巧(一)--Android中伸缩自如的点9图片切法,没有美工自给自足 相信大家对.9 图片应该都很熟悉吧,有些人可能自己都会了,此篇献给那些不会的同学,咱们一起来聊聊.9图片的切 ...
- Mac OS 的属性列表文件plist装换
Mac OS系统自身包含有转换plist的工具:plutil.其中-p是以human可读方式显示plist文件,而convert就是转换参数,其中支持的格式有:xml,二进制和json.下面拿一个实际 ...
- window 8.1 + python 3.6 + chrome 59 + selenium 3.4 环境配置
系统环境 window 8.1 python 3.6 (已经安装了pip) chrome 59.0.3071.115 步骤 安装selenium pip install selenium 下载chro ...
- 基于event 实现的线程安全的优先队列(python实现)
event 事件是个很不错的线程同步,以及线程通信的机制,在python的许多源代码中都基于event实现了很多的线程安全,支持并发,线程通信的库 对于优先队列的堆实现,请看<python下实现 ...