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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
JavaScript Undefined,Null类型和NaN值区别
Oct 22 Javascript
jquery 应用代码 方便的排序功能
Feb 06 Javascript
javascript操作excel生成报表示例
May 08 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
详解JVM系列之内存模型
Jun 10 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python实现全局变量的两个解决方法
2014/07/03 Python
django中的setting最佳配置小结
2017/11/21 Python
python实现电子产品商店
2019/02/26 Python
python小程序实现刷票功能详解
2019/07/17 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
几道PHP面试题
2013/04/14 面试题
Lucene推荐的分页方式是什么?
2015/12/07 面试题
管理部部长岗位职责
2013/12/05 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
群众路线专项整治方案
2014/10/27 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
母亲节主题班会
2015/08/14 职场文书
给学校的建议书400字
2015/09/14 职场文书
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫