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 相关文章推荐
srcElement表格样式
Sep 03 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
js获取滚动距离的方法
May 30 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
微信小程序商品到详情的实现
Jun 27 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
JavaScript数组去重实现方法小结
Jan 17 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一些公用函数的集合
2008/03/27 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
php实现三级级联下拉框
2016/04/17 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python 含参构造函数实例详解
2017/05/25 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python的faker库用法
2019/11/28 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
2015年环卫工作总结
2015/04/28 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle