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 ...
随机推荐
- [MongoDB] mongodb与php
windows上安装mongodb的php扩展 下载地址https://s3.amazonaws.com/drivers.mongodb.org/php/index.html 找到对应的php版本的d ...
- Java基础——工厂模式
通过学习,一句话概括Java工厂模式的特点——通过建立一个工厂来创建对象,不必关心构造对象实例能不能被实例化啊等诸多细节和复杂过程. 工厂模式呢?就像我们从劳动密集型社会转型到技术密集型社会.打个比方 ...
- Safe Or Unsafe(hdu2527)哈弗曼VS优先队列
Safe Or Unsafe Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- Java - "JUC线程池" 线程状态与拒绝策略源码分析
Java多线程系列--“JUC线程池”04之 线程池原理(三) 本章介绍线程池的生命周期.在"Java多线程系列--“基础篇”01之 基本概念"中,我们介绍过,线程有5种状态:新建 ...
- ssh免密登陆及时间设置
1.ssh-keygen -t rsa -P '' -f ~/.ssh/id_rsa // 在自己主机生成私钥和公钥 2.scp id_rsa.pub centos@s201:/home/centos ...
- HDU2389(KB10-F 二分图最大匹配Hopcroft_Karp)
Rain on your Parade Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 655350/165535 K (Java/Ot ...
- Codeforces841B
B. Godsend time limit per test:2 seconds memory limit per test:256 megabytes input:standard input ou ...
- 【代码笔记】iOS-My97DatePicker日历
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...
- WebSerivce与WebAPI的区别
一.什么是Web Service Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实施的应 ...
- JavaScript中何时使用===,何时使用==
建议尽量都使用===,原因如下: 一致性:使用==对一致性没有任何好处,那么为什么不避免使用呢. 简单和性能:一般来说,===是最简单的操作符,因为它不用进行类型转换.JavaScript引擎的性能参 ...