js+JQuery返回顶部功能如何实现


Posted in Javascript onDecember 03, 2012

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。
首先需要在顶部添加如下html元素:
<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。
要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:

/*returnTop*/ 
p#back-to-top{ 
position:fixed; 
display:none; 
bottom:100px; 
right:80px; 
} 
p#back-to-top a{ 
text-align:center; 
text-decoration:none; 
color:#d1d1d1; 
display:block; 
width:64px; 
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ 
-moz-transition:color 1s; 
-webkit-transition:color 1s; 
-o-transition:color 1s; 
} 
p#back-to-top a:hover{ 
color:#979797; 
} 
p#back-to-top a span{ 
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; 
border-radius:6px; 
display:block; 
height:64px; 
width:56px; 
margin-bottom:5px; 
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ 
-moz-transition:background 1s; 
-webkit-transition:background 1s; 
-o-transition:background 1s; 
} 
#back-to-top a:hover span{ 
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px; 
}

上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:
js+JQuery返回顶部功能如何实现 js+JQuery返回顶部功能如何实现js+JQuery返回顶部功能如何实现js+JQuery返回顶部功能如何实现  js+JQuery返回顶部功能如何实现
有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script> 
<script> 
$(function(){ 
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失 
$(function () { 
$(window).scroll(function(){ 
if ($(window).scrollTop()>100){ 
$("#back-to-top").fadeIn(1500); 
} 
else 
{ 
$("#back-to-top").fadeOut(1500); 
} 
}); 
//当点击跳转链接后,回到页面顶部位置 
$("#back-to-top").click(function(){ 
$('body,html').animate({scrollTop:0},1000); 
return false; 
}); 
}); 
}); 
</script>

这样就可以了,你可以通过下面的地址观看实际的效果:
http://outofmemory.cn/code-snippet/tagged/javascript
注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。
Javascript 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
javawscript 三级菜单的实现原理
Jul 01 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
JavaScript严格模式详解
Nov 18 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
JS中数组重排序方法
Nov 11 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
ajax异步刷新实现更新数据库
Dec 03 #Javascript
JavaScript代码复用模式实例分析
Dec 02 #Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 #Javascript
script标签属性type与language使用选择
Dec 02 #Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 #Javascript
json对象转字符串如何实现
Dec 02 #Javascript
javascript 构造函数强制调用经验总结
Dec 02 #Javascript
You might like
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
python分割列表(list)的方法示例
2017/05/07 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
python动态视频下载器的实现方法
2019/09/16 Python
Python 线程池用法简单示例
2019/10/02 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
大学生入党思想汇报
2014/01/01 职场文书
预备党员入党思想汇报
2014/01/04 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
企业宣传策划方案
2014/05/29 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android