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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
网站接入QQ登录的两种方法
Jul 22 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
javascript函数式编程基础
Sep 15 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
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
Javascript模板技术
2007/04/27 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
Python常用模块介绍
2014/11/21 Python
机器学习python实战之决策树
2017/11/01 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
Python处理session的方法整理
2019/08/29 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
办理收楼委托书范本
2014/10/09 职场文书
2014年质检员工作总结
2014/11/18 职场文书
前台岗位职责
2015/02/13 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
离婚上诉状范文
2015/05/23 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android