jquery实现返回页面顶部功能。
<p id="back-to-top">
<span></span>
</p>
<script type="text/javascript">
$(function() {
//首先将#back-to-top隐藏
$("#back-to-top").hide();
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > ) {
$("#back-to-top").fadeIn();
} else {
$("#back-to-top").fadeOut();
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function() {
$('body,html').animate({
scrollTop :
}, );
return false;
});
});
});
</script>
<style type="text/css">
p#back-to-top {
position: fixed;
bottom: 100px;
right: 80px;
cursor:pointer;
} p#back-to-top span {
background:url(skins/images/totop.gif) no-repeat center center;
border-radius: 6px;
display: block;
height: 80px;
width: 80px;
margin-bottom: 5px;
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
} #back-to-top span:hover {
background: url(skins/images/totop.gif) no-repeat center center;
}
</style>
不要忘记引入jquery库
jquery实现返回页面顶部功能。的更多相关文章
- 仿CSDN Blog返回页面顶部功能
只修改了2个地方: 1,返回的速度-->改成了慢慢回去.(原来是一闪而返回) 2,返回顶部图标出现的时机-->改成了只要不在顶部就显示出来.(原来是向下滚动500px后才显示) 注意:JS ...
- 代码: 返回页面顶部 jquery
jquery代码: 返回页面顶部 <script type="text/javascript" src="http://cdn.bootcss.com/jquery ...
- HTML5商城开发五 实现返回页面顶部
本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最 ...
- react-router(v4) 路由跳转后返回页面顶部问题
遇到的问题 由A页面跳转到B页面,B页面停留在A页面的位置,没有返回到顶部. 问题分析 首先分析下出现此问题的原因: 在项目中使用的是 hashHistory,它是建立在 history 之上的,当路 ...
- jquery的返回顶端的功能实现
页面很长的时候,读到最下面,需要返回顶端,则在页面最下面布局一个返回顶部的图标很有用. 具体功能是,jquey控制,向下滚动出现返回顶部图片,若滚动返回顶部或点回顶部,则图标消失. 实现效果如下图:
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- 解决点击a标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- (转)解决点击a标签返回页面顶部的问题
本文转载至http://www.cnblogs.com/chenluomenggongzi/p/5950670.html 1 <!DOCTYPE html> 2 <html lang ...
- 解决点击空<a>标签返回页面顶部的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- MVC实现更新数据库的数据
经过一系列MVC的练习,如数据库的数据显示,添加,删除等,还差一个功能,就是更新,那本次练习的是MVC对数据库的数据进行更新. 写好更新的存过程: 有了存储过程,可以写实体(Entity)的方法了.写 ...
- 数据库中存储日期的字段类型到底应该用varchar还是datetime
将数据库中存储时间的数据类型改为varchar(),这时最好让这些时间是数据库中自动生成的(一个没有格式的输入也可能会导致输出错误),因为存储类型为varchar(),所以获取到的值也就被认为是一个字 ...
- C# - 企业框架下的存储过程输出参数
output 输出参数 在C# 中的获取方法 新建存储过程 create proc Test @ID int, @maxnum int output as begin declare @num int ...
- sqlserver C# 数据类型对照表(转载)
数据库中字段类型对应C#中的数据类型: 数据库 C#程序 int int32 text string bigint int64 或 longbinary System ...
- [日常] Go语言圣经--复数,布尔值,字符串习题
go语言圣经-复数 1.我们把形如a+bi(a,b均为实数)的数称为复数,其中a称为实部,b称为虚部,i称为虚数单位.两种精度的复数类型:complex64和complex128,分别对应float3 ...
- JAVA通过XPath解析XML性能比较
转自[http://www.cnblogs.com/mouse-coder/p/3451243.html] 最近在做一个小项目,使用到XML文件解析技术,通过对该技术的了解和使用,总结了以下内容. 1 ...
- Groovy中枚举简单使用--一对一映射
enum LevelEnum { S(1), C(2), B(3), A(4), X(5) private int value LevelEnum( int value) { this.value = ...
- Java虚拟机 - 结构原理与运行时数据区域
http://liuwangshu.cn/java/jvm/1-runtime-data-area.html 前言 本来计划要写Android内存优化的,觉得有必要在此之前介绍一下Java虚拟机的相关 ...
- 本地服务器搭建服务:ftp
开启FTP 服务针对局域网上需要管理的一些文件共享还是有一些帮助的,感兴趣的小伙伴可以尝试下: 1.开启internt 中ftp协议服务 完成即可 -> 可以访问了. tip: UTF-8 选f ...
- php中0与’0’的区别
首先php中0与'0',转化后值相等,但是类型不同: php是一种弱类型的语句,他的变量.字符定义其实并不十分规范,比如 $a = '4′;我们可以说这个$a是一个字符,但是他又可以直接进行数字的加减 ...