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 ...
随机推荐
- django2.1---后台管理 admin 字段内容过长,省略号替代
用django admin做后台的时候, 有些字段内容太长,像文章,长评论,新闻等可以限制显示长度,超出部分用...代替 1.在model.py中 def short_content(self): i ...
- .NET平台开源文档与报表处理组件包括Execel PDF Word等
在前2篇文章这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧 和这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,大伙热情高涨.再次拿出自己的私货,在.NET平台 ...
- net 异步与同步
一.摘论 为什么不是摘要呢?其实这个是我个人的想法,其实很多人在谈论异步与同步的时候都忽略了,同步异步不是软件的原理,其本身是计算机的原理及概念,这里就不过多的阐述计算机原理了.在学习同步与异步之前, ...
- MYSQL查询优化:使用索引
索引是提高查询速度的最重要的工具.当然还有其它的一些技术可供使用,但是一 般来说引起最大性能差异的都是索引的正确使用.在MySQL邮件列表中,人们经常询问那些让查询运行得更快的方法.在大多数情况下,我 ...
- c3p0 配置文件的设置。解决编码乱码问题等
<?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <named-confi ...
- 【原】Solr入门之概念和安装
Apache Solr 是Apache Lucene项目的开源企业搜索平台.其主要功能包括全文检索.命中标示.分面搜索.动态聚类.数据库集成,以及富文本(如Word.PDF)的处理.Solr是高度可扩 ...
- 【 js 基础 】【读书笔记】关于this
this 关键字是 Javascript 中很特别的一个关键字,被自动定义在所有函数的作用域中.this提供了一种更优雅的方式隐式“传递”一个对象的引用.今天就来说说 this 的指向问题. this ...
- JavaScript--事件入门(24)
// JavaScript事件是由访问Web页面的用户引起的一系列操作; // 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码; 一 事件介绍 // 事件一般是用于浏览器和用户操作进行交 ...
- SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选、检索功能(maven)
SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选.检索功能(maven) 本篇是新建的一个数据库,新建的一个完整项目. 本篇内容: (1)使用 Spri ...
- 字符串匹配常见算法(BF,RK,KMP,BM,Sunday)
今日了解了一下字符串匹配的各种方法. 并对sundaysearch算法实现并且单元. 字符串匹配算法,是在实际工程中经常遇到的问题,也是各大公司笔试面试的常考题目.此算法通常输入为原字符串(strin ...