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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
AngularJS语法详解
Jan 23 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 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
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python魔术方法详解
2015/02/14 Python
Python中的匿名函数使用简介
2015/04/27 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
python对html过滤处理的方法
2018/10/21 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
Python如何测试stdout输出
2020/08/10 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
Ajax和javascript的区别
2013/07/20 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
小学新学期寄语
2014/04/02 职场文书
工作保证书范文
2014/04/29 职场文书
建筑工地文明标语
2014/10/09 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
Python绘制地图神器folium的新人入门指南
2021/05/23 Python