手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >使用jQuery实现返回顶部
使用jQuery实现返回顶部
摘要:使用jQuery实现。所用图片:1、尝试滚动此页面到底部即可出现go2top按钮。2、go2top-inner暂未使用。HTML&JS定义:...

使用jQuery实现。所用图片:

使用jQuery实现返回顶部1

1、尝试滚动 此页面到底部即可出现go2top按钮。

2、go2top-inner暂未使用。

HTML&JS定义:

复制代码 代码如下:

<a id="go2top" href="#header"><span></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实现返回顶部】相关文章:

jQuery实现表格行上移下移和置顶的方法

利用js实现禁止复制文本信息

jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

jQuery实现文本展开收缩特效

初步使用Node连接Mysql数据库

jquery实现弹出层效果实例

使用RequireJS优化JavaScript引用代码的方法

JQuery中上下文选择器实现方法

javascript实现行拖动的方法

JQuery中属性过滤选择器用法

精品推荐
分类导航