jQuery实现返回顶部功能适合不支持js的浏览器


Posted in Javascript onAugust 19, 2014

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮。

首先需要在顶部添加如下html元素:

<p id="back-to-top"><a href="#top" rel="external nofollow" ><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; 
}

上面样式中的背景图片是雪碧图,下面提供两个单独的返回顶部图片方便朋友们使用:

jQuery实现返回顶部功能适合不支持js的浏览器

有了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>

这样就可以了。

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

Javascript 相关文章推荐
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
jQuery使用方法
Feb 04 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
用循环或if语句从json中取数据示例
Aug 18 #Javascript
通过jquery 获取URL参数并进行转码
Aug 18 #Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 #Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 #Javascript
使用node.js半年来总结的 10 条经验
Aug 18 #Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 #Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 #Javascript
You might like
PHP 图片水印类代码
2012/08/27 PHP
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
详解Python命令行解析工具Argparse
2016/04/20 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
什么是.net
2015/08/03 面试题
自荐书4要点
2014/01/25 职场文书
水电工岗位职责
2014/02/12 职场文书
安全生产实施方案
2014/02/23 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
企业文化标语大全
2014/06/10 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
保姆聘用合同
2015/09/21 职场文书
《小乌鸦爱妈妈》教学反思
2016/02/19 职场文书
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏