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 相关文章推荐
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
用循环或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 单引号与双引号的区别
2009/11/24 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
vuex实现简易计数器
2016/10/27 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Python实现高效求解素数代码实例
2015/06/30 Python
用Python设计一个经典小游戏
2017/05/15 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
商场中秋节活动方案
2014/02/07 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
同意转租证明
2015/06/24 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python