jQuery回到顶部的代码


Posted in Javascript onJuly 09, 2016

在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于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; 
}

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

jQuery回到顶部的代码 jQuery回到顶部的代码jQuery回到顶部的代码 jQuery回到顶部的代码 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>

这样就可以了。

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

下面在给大家分享一段jquery回到顶部代码

1. 页面内容较多, 从底部超链接 点击回到页面顶部

// 回到顶部
var $top = $('<a class="doc-gotop" href="javascript:;">TOP</a>')
.on('click', function () {
$(window).scrollTop(0);
return false;
});
$('body').append($top);
Javascript 相关文章推荐
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 #Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 #Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 #Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 #Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 #Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 #Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 #Javascript
You might like
php socket客户端及服务器端应用实例
2014/07/04 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
小试JQuery的AutoComplete插件
2011/05/04 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
Python获取央视节目单的实现代码
2015/07/25 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
Solaris操作系统的线程机制
2012/12/23 面试题
《锄禾》教学反思
2014/04/08 职场文书
《社戏》教学反思
2014/04/15 职场文书
施工安全承诺书
2014/05/22 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
校园开放日新闻稿
2015/07/17 职场文书
实习感想范文
2015/08/10 职场文书
上班旷工检讨书
2015/08/15 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS