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 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
js制作支付倒计时页面
Oct 21 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 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
CodeIgniter CLI模式简介
2014/06/17 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
JavaScript 创建对象
2009/07/17 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
ext jquery 简单比较
2010/04/07 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
axios学习教程全攻略
2017/03/26 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python处理cookie详解
2014/02/07 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Django REST 异常处理详解
2020/07/15 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
档案接收函范文
2014/01/10 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
春秋淹城导游词
2015/02/11 职场文书
保安辞职信范文
2015/02/28 职场文书
学校捐书活动总结
2015/05/08 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL