基于jquery的返回顶部效果(兼容IE6)

  最近也在学jquery,就顺便记录一下了。

  HTML

  

复制代码 代码如下:

  <div class="scroll"></div>

  <script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script>

  <script type="text/javascript" src="../skins/css/top.js" charset="UTF-8"></script>

  CSS

  

复制代码 代码如下:

  .scroll{

  background:url(../image/scroll.gif) no-repeat center top transparent;

  bottom:100px;

  cursor:pointer;

  height:67px;

  width:18px;

  position:fixed;

  _position:absolute; /*兼容IE6*/

  _top: expression(eval(document.documentElement.scrollTop)+700); /*700为图片距离顶部的设定距离,可以修改。不加700则图片紧贴在顶部滚动*/

  }

  html{_text-overflow:ellipsis;} /*解决IE6下图片抖动*/

  top.js

  

复制代码 代码如下:

  $(document).ready(function(){

  var show_delay;

  var scroll_left=parseInt((document.body.offsetWidth-960)/2)+961; //960为页面宽度

  $(".scroll").click(function (){

  document.documentElement.scrollTop=0;

  document.body.scrollTop=0;

  });

  $(window).resize(function (){

  scroll_left=parseInt((document.body.offsetWidth-960)/2)+961;

  $(".scroll").css("left",scroll_left);

  });

  reshow(scroll_left,show_delay);

  });

  function reshow(marign_l,show_d) {

  $(".scroll").css("left",marign_l);

  if((document.documentElement.scrollTop+document.body.scrollTop)!=0)

  {

  $(".scroll").css("display","block");

  }

  else

  {

  $(".scroll").css("display","none");}

  if(show_d) window.clearTimeout(show_d);

  show_d=setTimeout("reshow()",500);

  }

  最后不要忘记了jQuery.js文件哦!