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 ...
随机推荐
- 简单的C语言猜数字小游戏
猜数字小游戏可谓是C语言最为基础的一个知识点了,我们可以在此基础上进行延伸,实现随机数的猜测,然后是加入再来一局的模式,等等.这里是抛砖引玉,希望你能做出你的经典之作. #include <st ...
- [WinForm]最小化到系统托盘，右键退出
1.拉出一个notifyIcon1到用户界面,也可以NEW一个 2.拉出一个ContextMenuStrip控件,命名为mymenu,集合中增加退出 3.notifyIcon1的属性ContextMe ...
- “基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统"已被《计算机时代》录用
今天收到<计算机时代>编辑部寄来的稿件录用通知,本人撰写的论文"基于数据仓库的广东省高速公路一张网过渡期通行数据及异常分析系统",已被<计算机时代>录 ...
- Ext JS 5初探（二） ——Bootstrap.js
在Bootstrap.js文件中,总共有1500行(包含注释和空行),使用编辑器的代码折叠功能就如下图可以一窥全貌了. 从代码可以看到,这里主要定义了Ext.Boot.Ext.globalEval.E ...
- Android下用Activity实现圆角的自定义弹窗
这里我们使用9patch制作一个背景,找到SDK目录下的tools目录,双击draw9patch.bat文件,如下图: 打开想要编辑的文件,进行编辑(9patch的编辑教程自寻). 编辑完成后,保存到 ...
- 典型分布式系统分析: GFS
本文是典型分布式系统分析系列的第二篇,关注的是GFS,一个分布式文件存储系统.在前面介绍MapReduce的时候也提到,MapReduce的原始输入文件和最终输出都是存放在GFS上的,GFS保证了数据 ...
- Oracle Global Finanicals Technical Reference（一）
Skip Headers Oracle Global Finanicals Oracle Global Financials Technical Reference Manual Release 11 ...
- PS 滤镜——扩散特效， 毛玻璃 效果
%%% Diffuse %%% 扩散效果 clc; clear all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algori ...
- Salesforce Lightning开发学习（二）Component组件开发实践
lightning的组件区分标准组件.自定义组件和AppExchange组件.标准组件由SF提供,自定义组件由developer自行开发,AppExchange组件由合作伙伴建立.下面我们写一个简单的 ...
- Javascript、CSS、HTML面试题
1 JS中的三种弹出式消息提醒(警告窗口.确认窗口.信息输入窗口)的命令是什么? alert confirm prompt 2声明一个已经存在一个CSS有几种方式? 1.导入一个已经存 ...