手机
当前位置:查字典教程网 >编程开发 >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仿gmail实现fixed布局的方法

jQuery实现文本展开收缩特效

jQuery实现返回顶部效果的方法

使用node+vue.js实现SPA应用

jquery插件validation实现验证身份证号等

jQuery实现表格行上下移动和置顶效果

javascript实现行拖动的方法

js实现发送验证码后的倒计时功能

初步使用bootstrap快速创建页面

初步使用Node连接Mysql数据库

精品推荐
分类导航