使用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 Validate插件ajax方式验证输入值的实例
下面小编就为大家分享一篇jQuery Validate插件ajax方式验证输入值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12jquery之ajaxfileupload异步上传插件(附工程代码)
在处理文件上传时需要使用到文件的异步上传,这里使用Jquery Ajax File Uploader这个组件,服务器端采用struts2来处理文件上传2013-04-04
最新评论