使用jQuery实现返回顶部
更新时间：2015年01月26日 09:26:48 投稿：hebedich
博客园是程序员们比较喜欢的聚集地，很多人喜欢发发心得，一直都觉着挺好的，但最不满意他的一点是，没有返回到顶部的功能，好吧，我们自己来添。
使用jQuery实现。所用图片：
1、尝试滚动 此页面到底部即可出现go2top按钮。
2、go2top-inner暂未使用。
HTML&JS定义：
复制代码 代码如下:
<a id="go2top" class="go2top" href="#header"><span class="go2top-inner"></span></a>
<script type="text/javascript">
$(function(){
$('#go2top').click(function(){
$("html,body").animate({scrollTop:0},200);
return false;
});
$(window).scroll(function(){
var obj=$('#go2top');
if(obj.offset().top>900){
obj.show();
}else{
obj.hide();
}
});
});
</script>
CSS定义
复制代码 代码如下:
.go2top {
background: url("http://images.cnitblog.com/blog/84698/201303/28125209-67653841b1114531a2a1e6db63315d63.png") no-repeat scroll left top transparent;
bottom: 65px;
color: #444444;
display: none;
height: 50px;
margin-left: 510px;
position: fixed;
right: 160px;
text-align: center;
width: 50px;
}
.go2top:hover {
background-position: -50px top;
}
试试看，是不是有了返回顶部了，非常方便实用的功能，希望大家能够喜欢。
相关文章
jQuery基于ajax实现页面加载后检查用户登录状态的方法
这篇文章主要介绍了jQuery基于ajax实现页面加载后检查用户登录状态的方法,结合实例形式较为详细分析了jQuery结合ajax进行表单登陆验证操作的具体步骤与相关操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了帮助你创建更好的jQuery插件的10条建议,涉及jQuery插件设计中常用的技巧,需要的朋友可以参考下2015-05-05
今天主要总结一下jQuery操作元素属性的一些知识，学习jquery的朋友可以参考下2010-02-02
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
这篇文章主要介绍了jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码，非常的简单实用，效果也很棒，有需要的小伙伴可以参考下。2015-04-04
本文使用大名顶顶的jquery来实现QQ校友的DIV模拟窗口，QQ的检验一些都是非常棒的2010-03-03
这篇文章主要介绍了15个常用的jquery代码片段，对大家学习jquery程序设计有所帮助,需要的朋友可以参考下2015-12-12
JQuery 抓取博客园首页RSS直接将代码保存到文本文档，更改后缀名为html浏览 即可查看效果2011-12-12
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。本文主要对表单验证插件-Validation进行案例分析，详细介绍，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
本文给大家分享一款jquery实现的完美拖拽(拖动div层效果)，如果你正在找这类效果不妨进入参考一下。2015-06-06
本文主要分享了jQuery实现弹幕效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论