使用jQuery实现返回顶部_Javascript教程-查字典教程网
使用jQuery实现返回顶部
使用jQuery实现返回顶部
发布时间:2016-12-30 来源:查字典编辑
摘要:使用jQuery实现。所用图片:1、尝试滚动此页面到底部即可出现go2top按钮。2、go2top-inner暂未使用。HTML&JS定义:...

使用jQuery实现。所用图片:

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;

}

试试看,是不是有了返回顶部了,非常方便实用的功能,希望大家能够喜欢。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类