jquery实现页面常用的返回顶部效果
更新时间：2016年03月04日 10:05:01 投稿：lijiao
这篇文章主要为大家详细介绍了jquery实现页面常用的返回顶部效果代码，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery实现返回顶部效果的全部代码，供大家参考，具体内容如下
效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
height: 2000px;
}
.gotop{
display: block;
width: 32px;
height: 32px;
background-color: red;
text-align: center;
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: white;
line-height: 32px;
position: fixed;
right:50px;
bottom:50px;
opacity: 0;
/*top: 500px;*/
}
</style>
</head>
<body>
<div class="wrap">
<a href="###" class="gotop">TOP</a>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 当滚动条滚动大于200时出现，未大于，消失
$(window).scroll(function(){
if($(document).scrollTop()<200){
// alert("kk");
$(".gotop").stop().animate({
opacity: 0
},1000)
}
else{
$(".gotop").show().stop().animate({
opacity: 1
},1000)
}
})
// 返回顶部
$(".gotop").on("click",function(){
$("html body").animate({
scrollTop:0
},1000)
})
})
</script>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery命名空间与闭包用法,结合实例形式演示了jQuery中命名空间及闭包的具体使用技巧,需要的朋友可以参考下2017-01-01
需要jQuery -detach 后的dom 结构或某个值，如何获取到呢？一直困惑着我们，不过本文将为大家解开疑惑，感兴趣的朋友可以了解下，或许本文对你有所帮助2013-02-02
这篇文章主要介绍了Jquery 动态添加元素并添加点击事件实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
这篇文章主要介绍了zTree搜索功能 -- 关键字查询 -- 递归无限层的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-01-01
jQuery毕竟还只是一个基础的最底层的工具集，封装元素选择器，事件等等，基本上能满足一般的需求，但要从整体的WEB的周度来看，为了提高javascript开发的效率与可重用性，就需要有一个整体的布局2011-01-01
这篇文章主要为大家详细介绍了基于jquery实现左右无缝轮播图的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了JQuery实现动态适时改变字体颜色的方法,实例分析了jQuery操作鼠标事件及颜色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成，以及如何用extend方法来扩展库。链式操作 也仅仅是方法体内返回this。2011-06-06
下面小编就为大家带来一篇关于两个jQuery(js)特效冲突的bug的解决办法。小编觉得挺不错的，现在就分享 给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
返回顶部效果想必大家并不陌生吧，其实实现方法有很多，在本文为大家介绍下使用jquery是如何轻易实现的，感兴趣的朋友可以参考下2013-09-09
最新评论