使用jQuery实现返回顶部

  使用jQuery实现。所用图片:

使用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;

  }

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